useEffect старые данные

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, чтобы показать

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})))