Ошибка: слишком много повторных отрисовок. React ограничивает количество рендеров, чтобы предотвратить бесконечный цикл

Я создаю простой список дел в response, где я хочу сохранить элемент в submit. Я знаю, что что-то не так с handleSubmit (), но не могу его решить.

import React, { useState } from "react";

function List() {
  const [items, setItems] = useState([]);
  const [item, setItem] = useState("");

  function handleSubmit() {
      setItems([ ...items, item ]);
      console.log(items);
  }
  return (
    <div>
      <h3>To Do List</h3>
      <form onSubmit={handleSubmit()}>
        <input
          value={item}
          onChange={(event) => {
            setItem(event.target.value);
          }}
        />
        <ul>
          <li></li>
        </ul>
        <button type="submit">Add</button>
      </form>
    </div>
  );
}

export default List;

reactjs javascript react-hooks use-state
person Ali Qumail    schedule 13.02.2021    source источник
comment
Попробуйте onSubmit={handleSubmit} И вы, вероятно, тоже захотите предотвратить дефолт   -  person Nadia Chibrikova    schedule 13.02.2021

Ответы (2)


arrow_upward
1
arrow_downward

<form onSubmit={handleSubmit()}> должно быть <form onSubmit={handleSubmit}>.

Добавляя (), вы вызываете handleSubmit

person Uragirii    schedule 13.02.2021

arrow_upward
0
arrow_downward

Вы вызываете функцию handleSubmit напрямую, вместо того, чтобы передавать ее ссылку. просто измените <form onSubmit={handleSubmit()}> на <form onSubmit={handleSubmit}>

Также вам необходимо предотвратить действие отправки формы по умолчанию. Вы можете добавить строку preventDefault в свою функцию handleSubmit

  function handleSubmit(event) {
      event.preventDefault();
      setItems([ ...items, item ]);
      console.log(items);
  }
person Suraj Rane    schedule 13.02.2021