Question

研究反应挂钩我遇到了一个问题，但我不知道发生了什么。我的想法是制作一个可以递增的数字列表，并且此列表应始终递减。发生的情况是，当我先添加一个高值时，它会到达列表的末尾，然后在我键入新内容或增加数字时才进行重新组织，但是如果我在控制台中打印该数组，则组织起来很糟糕。如何解决此问题以及实际情况是什么？

按照以下代码进行操作：

function App() {
  const [data, setData] = useState([]);
  const [id, setId] = useState(0)
  const [inputText, setInputText] = useState('')

  useEffect(() => {
    setData(data => data.sort((a, b) => b.count - a.count));
  }, [data])

  function handleSubmit(e) {
    e.preventDefault();
    setData(data => [...data, { id: id, count: inputText}])
    setInputText('')
    setId(id + 1);
  }

  function handleAdd(id) {
    setData(data => data.map(e => e.id !== id ? e : ({ ...e, count: e.count + 1 })))
  }

  return (
    <div>
      <form onSubmit={(e) => handleSubmit(e)} >
        <input type="number" onChange={e => setInputText(parseInt(e.target.value))} value={inputText} />
        <button>Submit</button>
      </form>
      {
        wordList.map(
        (item) =>
          <div>
            <p>{item.count}</p>
            <button onClick={() => handleAdd(item.id)}>+</button>
          </div>
        )
      }
    </div>
  );
}

export default App;

示例：数组开始为空，然后添加数字2：

[
  {id:0, count:2}
]

然后添加一个更大的数字后，数组应该像这样变小以重新整理

[
  {id:1, count:3},
  {id:0, count:2}
]

这正在发生，但是如果与某些东西交互，只需更新DOM

gif to show

Answer 1

请更新setData函数：

setData(data => [...data, { id: id, count: inputText } ] );

setData(data => data.sort((a, b) => b.count - a.count));

setData(data => data.map(e => e.id !== id ? e : ({...e, count: e.count+1})))

useEffect旧数据

1 个答案: