时间戳

首页 > 解决方案 > 如何将反应 js 标题标题设置为数组的元素？

javascript - 如何将反应 js 标题标题设置为数组的元素？

问题描述

所以我目前在我的 react js 网站中有一个标题组件，我想将它的标题设置为数组的一个元素，但我似乎无法弄清楚如何。这是我的代码

import Header from './components/Header';

var shoppinglist = []
var currentitem = ""
const App = () => {
  function getData(val){
    console.warn(val.target.value)
    currentitem = val.target.value;
  }
  function logData() {
    shoppinglist.push(currentitem)
    console.log(shoppinglist)
  }
  function deleteItem() {
    shoppinglist.pop()
    console.log(shoppinglist)
    console.log(shoppinglist[0])
  }
  return (
    <div className="Container">
        <Header title = "grocery list" />
        <input type="text" onChange={getData}></input>
        <button onClick={logData}>add item to list</button>
        <button onClick={deleteItem}>delete item</button>
        <div className="listItems">
          <Header title = {shoppinglist[0]} />
        </div>
    </div>
  );
}

export default App;

我如何将标题标题设置为购物清单 [0]？

标签： javascriptreactjs

解决方案

如果您想在反应中使用动态组件，则必须使用状态变量。Else React 不会重新渲染你的代码。使用 React Hooks 可能看起来像这样：

import Header from './components/Header';

var currentitem = ""
const App = () => {
  const [shoppinglist, setShoppinglist] = useState([]);

  function getData(val){
    console.warn(val.target.value)
    currentitem = val.target.value;
  }

  function addItem() {
    shoppinglist.push(currentitem)
    setShoppinglist([...shoppinglist])
  }

  function deleteItem() {
    shoppinglist.pop()
    setShoppinglist([...shoppinglist])
  }

  return (
    <div className="Container">
        <Header title = "grocery list" />
        <input type="text" onChange={getData}></input>
        <button onClick={addItem}>add item to list</button>
        <button onClick={deleteItem}>delete item</button>
        <div className="listItems">
          <Header title = {shoppinglist[0]} />
        </div>
    </div>
  );
}

export default App;

推荐阅读