Массив не обновляется с помощью useState

function App() {

  let [task, setTask] = useState('');
  let [taskList, updateTaskList]= useState([]);

  let updateList = function (event) {
    event.preventDefault();
    console.log(task);
    updateTaskList([
      ...taskList,
      {text: task, id: Math.random()*1000}
    ]);
    console.log(taskList);  
  }


  return (
    <div className="App" >
      <div>
        <h3 className="heading">Task list</h3>
        <form onSubmit={updateList}>
          <input type="text" className="input-section"
            placeholder="Enter your tasks" value={task}
            onChange={(event) => { setTask(event.target.value) }} />
          <span className="fa fa-plus-square" aria-hidden="true"></span>
        </form>
         {/* {taskList.map((eachValue) => (
            <AddList listItem={eachValue} />
          ))};  */}
      </div>
    </div>
  );
}

Вот фрагмент моего кода, я пытаюсь создать здесь список дел. Но updateTaskList не работает должным образом. После того, как мы введем какое-то значение в поле ввода и нажмем клавишу ввода, taskList покажет пустой массив. Я не понимаю, что я делаю не так, может кто-нибудь, пожалуйста, скажите мне, что я делаю не так


reactjs javascript use-state
person harsh    schedule 07.09.2020    source источник
comment
состояние обновляется асинхронно   -  person Yousaf    schedule 07.09.2020

Ответы (1)


arrow_upward
1
arrow_downward

updateTaskList асинхронный. Вероятно, он обновляет ваш список, но вы его не видите, потому что вы сразу распечатываете список после updateTaskList. Попробуйте добавить задержку и затем распечатайте список задач или используйте useEffect, чтобы распечатать его.

    setTimeout(() => console.log(taskList), 500)

OR

    useEffect(() => {
      console.log(taskList)
    }, [taskList.length])
person dumbape    schedule 07.09.2020
comment
Я сделал то, что вы предложили, но получил эту ошибку. Последний аргумент, переданный для useEffect, изменил размер между рендерами. Порядок и размер этого массива должны оставаться постоянными. - person harsh; 07.09.2020
comment
Измените его с taskList.length на taskList, потому что функция обновления установит новый массив в taskList, и компаратор сработает, потому что новый массив имеет другую ссылку - person Auskennfuchs; 07.09.2020
comment
Это все равно будет работать, поскольку вы просто добавляете список, который также изменит его длину вместе со ссылкой. Что касается ошибки, проблема может быть в другом, а не в useEffect, в идеале она должна работать. - person dumbape; 07.09.2020