如何使用相同的函数设置状态并返回JSX

Question

我正在尝试创建一个函数，当它被调用时，它会将状态设置为对象｛item:'无论用户类型如何'，list:[…list，todo]｝；但是，我不知道如何设置新状态并同时返回<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

您不能或不会同时更新状态和返回JSX。您将状态更新排入队列，React将更新状态，并描述如何从该状态呈现JSX。呈现返回应该获取state并将其映射到一堆列表项li元素。

有关从数组渲染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>
);
};