如何将元素推送到 useState 数组 React 钩子中?这是作为react状态的旧方法吗?或者有什么新东西?
React Hooks (useState) 中的推送方法?
IT技术
javascript
reactjs
react-hooks
2021-02-09 20:58:44
6个回答
使用时useState
,可以获得状态项的更新方法:
const [theArray, setTheArray] = useState(initialArray);
然后,当您想要添加新元素时,您可以使用该函数并传入新数组或将创建新数组的函数。通常是后者,因为状态更新是异步的,有时是批处理的:
setTheArray(oldArray => [...oldArray, newElement]);
有时,如果您仅针对某些特定用户事件click
(例如(但不是 like mousemove
))更新处理程序中的数组,则无需使用该回调形式就可以逃脱:
setTheArray([...theArray, newElement]);
React 确保刷新渲染的事件是此处列出的“离散事件” 。
实时示例(将回调传递到setTheArray
):
因为theArray
那里的唯一更新是click
事件中的一个(“离散”事件之一),所以我可以直接更新addEntry
:
为了进一步扩展,这里有一些常见的例子。从...开始:
const [theArray, setTheArray] = useState(initialArray);
const [theObject, setTheObject] = useState(initialObject);
在数组末尾推送元素
setTheArray(prevArray => [...prevArray, newValue])
在对象末尾推送/更新元素
setTheObject(prevState => ({ ...prevState, currentOrNewKey: newValue}));
在对象数组的末尾推送/更新元素
setTheArray(prevState => [...prevState, {currentOrNewKey: newValue}]);
在数组对象的末尾推送元素
let specificArrayInObject = theObject.array.slice();
specificArrayInObject.push(newValue);
const newObj = { ...theObject, [event.target.name]: specificArrayInObject };
theObject(newObj);
这里也有一些工作示例。 https://codesandbox.io/s/reacthooks-push-r991u
您可以在自定义状态的末尾附加数据数组:
const [vehicleData, setVehicleData] = React.useState<any[]>([]);
setVehicleData(old => [...old, ...newArrayData]);
例如,在下面,你会出现一个 axios 的例子:
useEffect(() => {
const fetchData = async () => {
const result = await axios(
{
url: `http://localhost:4000/api/vehicle?page=${page + 1}&pageSize=10`,
method: 'get',
}
);
setVehicleData(old => [...old, ...result.data.data]);
};
fetchData();
}, [page]);
最推荐的方法是一起使用包装函数和扩展运算符。例如,如果你初始化了一个name
像这样调用的状态,
const [names, setNames] = useState([])
你可以像这样推送到这个数组,
setNames(names => [...names, newName])
希望有帮助。
与在 React 类组件中使用“正常”状态执行此操作的方式相同。
例子:
function App() {
const [state, setState] = useState([]);
return (
<div>
<p>You clicked {state.join(" and ")}</p>
//destructuring
<button onClick={() => setState([...state, "again"])}>Click me</button>
//old way
<button onClick={() => setState(state.concat("again"))}>Click me</button>
</div>
);
}
其它你可能感兴趣的问题