Javascript useDispatch 出现错误，我无法添加到我的数组中

代码并没有像你想象的那样发送addTodo.不是将导入的addTodo操作传递给本地addTodo提交处理程序函数，而是将本地addTodo提交处理程序传递给自身并在dispatch中调用，并在随后的调用中传递一个不是要调用preventDefault的事件对象的参数.

...
import { addTodo } from "./list.slice"; // <-- never referenced

function Form() {
  const list = useSelector((state) => state.list.value);
  const [todo, setTodo] = useState("");

  const dispatch = useDispatch();

  const addTodo = (e, addTodo) => { // <-- (1) this addTodo is in scope
    e.preventDefault();
    dispatch(addTodo( // <-- (3) calls local addTodo without event object!
      [...list, { id: list.length + 1, label: todo }]
    ));

    setTodo("");
  };

  return (
    <div>
      <FormWrapper>
        <form action="" onSubmit={(e) => addTodo(e, addTodo)}> // <-- (2) addTodo passed to itself!
          <input
            type="text"
            name="todo"
            id="todo"
            value={todo}
            onChange={(e) => setTodo(e.target.value)}
          />
          <input type="submit" value="Add todo" />
        </form>
      </FormWrapper>
    </div>
  );
}

修复很简单，将提交处理程序重命名为anything，但与您想要分派的操作具有相同的标识符.您也不需要通过提交处理程序回调的参数来传递操作，因为addTodo操作已经具有文件作用域.

...
import { addTodo } from "./list.slice";

function Form() {
  const list = useSelector((state) => state.list.value);
  const [todo, setTodo] = useState("");

  const dispatch = useDispatch();

  const submitHandler = (e) => {
    e.preventDefault();
    dispatch(addTodo( // <-- imported addTodo action :)
      [...list, { id: list.length + 1, label: todo }]
    ));

    setTodo("");
  };

  return (
    <div>
      <FormWrapper>
        <form action="" onSubmit={submitHandler}>
          <input
            type="text"
            name="todo"
            id="todo"
            value={todo}
            onChange={(e) => setTodo(e.target.value)}
          />
          <input type="submit" value="Add todo" />
        </form>
      </FormWrapper>
    </div>
  );
}