使用 useState 和 React 的 TodoList - 更新 todoList 的问题

Question

我在使用 React 和 useState 更新我的 todoList 时遇到问题...我应该尝试使用“推送”还是其他方式来更新我的列表？非常感谢您 ！！import React, { useState } from "react";const App = () => {  // State search et sa fonction de modification  const [search, setSearch] = useState("");  const updateSearch = (e) => {    setSearch(e.target.value);    console.log(search);  };  // State de liste et sa fonction de modification  const [list, setList] = useState([]);  const updateList = () => {    setList([...list, search]);  };  return (    <div>      <h1>Welcome on your todolist</h1>      <br />      <input type="text" onChange={updateSearch} value={search} />      <button onClick={updateList}>enter</button>      <ul></ul>    </div>  );};export default App;

Answer 1

这是因为 useState 是异步的，如果您想在更新后记录状态，您可以使用 useEffect 挂钩list作为依赖

项另外我想建议为列表的每个元素添加一个键，一种快速的方法是使用数组索引，像这样：

 {list.map((item,index) => (

          <li key={index}>{item}</li>

        ))}

但是最好将您的列表作为对象列表[value,id]并在您将项目添加到列表时生成一个 uuid()

Answer 2

我将改写我的问题：我再次处理我的代码，一切似乎都正常，但是当我控制台记录数组列表时，数组第一个数组总是空的......

import React, { useState } from "react";

const App = () => {

  // State search et sa fonction de modification

  const [search, setSearch] = useState("");

  const updateSearch = (e) => {

    setSearch(e.target.value);

    console.log(search);

  };

  // State de liste et sa fonction de modification

  const [list, setList] = useState([]);

  const updateList = () => {

    setList([...list, search]);

    setSearch("");

    console.log(list);

  };

  return (

    <div>

      <h1>Welcome on your todolist</h1>

      <br />

      <input type="text" onChange={updateSearch} value={search} />

      <button onClick={updateList}>enter</button>

      <h1>what is inside of list : {list}</h1>

      <ul>

        {list.map((item) => (

          <li>{item}</li>

        ))}

      </ul>

    </div>

  );

};

export default App;