在 React 中,setState
函数可以接受两种参数形式:
-
对象形式:
setState(newStateObject);
这种形式的
setState
接受一个对象作为参数,对象中包含要更新的状态的键值对。React 会将这个新的状态合并到当前的状态中。示例:
// 假设当前的状态是 { count: 0 } setState({ count: 1 }); // 将状态更新为 { count: 1 }
-
函数形式:
setState((prevState) => newState);
这种形式的
setState
接受一个函数作为参数,函数的参数是当前的状态(prevState),返回值是包含要更新的状态的对象。React 会使用这个函数返回的对象来更新状态。示例:
// 假设当前的状态是 { count: 0 } setState((prevState) => {return { count: prevState.count + 1 }; }); // 将状态更新为 { count: 1 }
在函数形式中,使用函数的形式可以确保你基于当前的状态进行更新,避免因为异步更新而导致的问题。React 会确保在多次调用 setState
的时候,这些更新是按顺序进行的。
总的来说,setState
是 React 中用于更新组件状态的方法,你可以根据需要选择对象形式或函数形式。
实践
const obj = JSON.parse(evt.data);// 等于这个条件说明就是JSON字符串 会返回trueif (typeof obj == 'object' && obj) {# 方法一// list.push(obj);// setList([...list, obj]);# 方法二setList((prevState) => [...prevState, obj]);}