如何设置 state 并使用相同的 function 返回 JSX

Question

我正在尝试创建一个 function，当它被调用时，它将 state 设置为 object {item: 'whatever the user types', list: [...list, todo]}; 但是，我不知道如何设置新的 state 并同时返回<li>{todo}</li> 。 我被困了一段时间，所以如果你能帮助我，我将不胜感激。

const Todo = () => {
  const [state, setState] = useState({ item: '', list: [] });

  const setTodoValue = (e) => {
    setState((previousState) => {
      return { ...previousState, item: e.target.value };
    });
  };

  const addTodo = () => {
    setState((previousState) => {
      return {
        ...previousState,
        list: [...previousState.list, previousState.item],
      };
    });
  };

  return (
    <div>
      <input onChange={setTodoValue} type="text" />
      <button onClick={addTodo}> + </button>
      {}
    </div>
  );
};

Answer 1

您不能也不会更新 state并同时返回 JSX。 您将 state 更新加入队列，React 更新 state，并且您描述了如何从 state 渲染 JSX。渲染返回应该将state和 map 带入一堆列表项li元素。

有关从 arrays 渲染 JSX 的更多详细信息，请参阅列表和键。

将state.list渲染成无序列表的示例：

const Todo = () => {
  const [state, setState] = useState({ item: '', list: [] });

  const setTodoValue = (e) => {
    setState((previousState) => {
      return { ...previousState, item: e.target.value };
    });
  };

  const addTodo = () => {
    setState((previousState) => {
      return {
        ...previousState,
        list: [...previousState.list, previousState.item],
      };
    });
  };

  return (
    <div>
      <input onChange={setTodoValue} type="text" />
      <button type="button" onClick={addTodo}> + </button>
      <ul>
        {state.list.map(todo => (
          <li key={todo}>{todo}</li>
        ))}
      </ul>
    </div>
  );
};