Question

我在使用React和useState更新我的todoList时遇到问题...我应该尝试使用“ push”还是其他方式来更新我的列表？

非常感谢您！

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

我将重述我的问题：我再次编写代码，一切似乎都可以正常工作，但是当我在控制台上记录阵列列表时，阵列第一个阵列始终为空...

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;

Answer 2

这是因为useState是异步的，如果要在更新后记录状态，则可以使用useEffect钩子与list作为依赖项
另外我还建议向列表的每个元素添加一个键，一种快速的方法是使用数组索引，如下所示：

 {list.map((item,index) => (
          <li key={index}>{item}</li>
        ))}

但是最好将列表作为对象[value,id]的列表，并在将项目添加到列表时生成uuid（）

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

2 个答案: