如何使用相同的功能设置状态和 return JSX

Question

我正在尝试创建一个函数，当它被调用时，它将状态设置为对象 {item: 'whatever the user types', list: [...list, todo]};但是，我不知道如何同时设置新状态和return <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

您不能或不会同时更新状态和 return JSX。您将状态更新放入队列，React 更新状态，然后描述如何从状态渲染 JSX。渲染 return 应该采用 state 并将其映射到一堆列表项 li 元素。

有关从数组渲染 JSX 的更多详细信息，请参阅 Lists and Keys。

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

如何使用相同的功能设置状态和 return JSX

How can I set the state and return JSX with the same function

html

javascript

reactjs

react-hooks

use-state