onclick 中的设置项未记录预期输出

Question

我正在编写一个简单的反应代码，将值添加到按钮列表 onClick。添加后，我将其记录在同一个块中。目前，我的问题是，使用 n-1 输入的字符串进行日志记录。即，如果我输入 egg，然后添加 milk，在添加 milk 之后，我会看到 egg 已登录，依此类推。这是我的代码。

function App() {
  const [list, setList] = useState([]);
  const [gItem, setGItem] = useState("");

  const AddItem = (e) => {
    e.preventDefault();
    setList([...list, gItem]);
    console.log(list);
  };
  return (
    <>
         <form className="grocery-form">
          <h3>grocery bud</h3>
          <div className="form-control">
            <label htmlFor="name"></label>
            <input
              type="text"
              placeholder="e.g. eggs"
              className="grocery"
              name="name"
              id="name"
              onChange={(e) => setGItem(e.target.value)}
            />
            <button className="submit-btn" type="submit" onClick={AddItem}>
              Submit
            </button>
          </div>
        </form>
        <div className="grocery-container">
          <List items={list} />
        </div>
     </>
  );
}

我无法理解哪里出错了。

Answer 1

setList 异步更新状态，因此如果您在使用它之后记录状态，将显示之前的值，要使其在更改此列表后记录当前状态，您可以像这样使用 useEffect 钩子：

useEffect(() => {
  console.log(list);
}, [list])

onclick 中的设置项未记录预期输出

Set item in onclick is not logging expected output

reactjs