[英]How do you empty an array in react?
As the question above says, how can I empty an array?正如上面的问题所说,我怎样才能清空一个数组? I tried using useState
setting the array like this setArray([])
but this actually doesn't not work properly because some times the array doesn't reset completly, is there another way to empty it?我尝试使用useState
设置这样的数组setArray([])
但这实际上不能正常工作,因为有时数组没有完全重置,还有其他方法可以清空它吗?
Code:代码:
const [array, setArray] = useState([]);
const functionName = (value) => {
//reset the array first
setArray([]);
setArray([value]);
}
with spread operator you can do it without resetting.使用扩展运算符,您无需重置即可完成此操作。
const [array, setArray] = useState([]);
const functionName = (value) => {
setArray([...value]);
}
First of all, there is no need to call setArray([]);
首先,不需要调用setArray([]);
when your ultimate goal is to change the value of the array to the value
that is passed down from your function.当您的最终目标是将数组的value
更改为从 function 传递下来的值时。
The reason why it probably doesn't update from time to time is because the Virtual DOM hasn't seen any changes at all or you're not iterating over them correctly.它可能不会不时更新的原因是因为虚拟 DOM 根本没有看到任何更改,或者您没有正确地迭代它们。
If you're changing the values of an array using useState
and looping over them and returning components, make sure to always set the key
property of your elements, which should be set to a unique identifier, so the Virtual DOM can function properly.如果您使用useState
更改数组的值并循环它们并返回组件,请确保始终设置元素的key
属性,该属性应设置为唯一标识符,以便虚拟 DOM 可以正确地 function。 For more information, please read the React documentation:有关更多信息,请阅读 React 文档:
https://reactjs.org/docs/lists-and-keys.html#keys https://reactjs.org/docs/lists-and-keys.html#keys
To answer your question in regards to clearing arrays: you can clear arrays by setting the variable to null
.要回答有关清除 arrays 的问题:您可以通过将变量设置为 null 来清除null
。
let exampleArray = ['a', 'b', 'c'];
console.log(exampleArray);
exampleArray = null;
console.log(exampleArray);
https://jsfiddle.net/mgfq75e2/ https://jsfiddle.net/mgfq75e2/
Do note that if you're using the useState
hook, it might take a couple of cycles before the changes are visible in your rendered output since it is executed asynchronously.请注意,如果您使用的是useState
挂钩,则可能需要几个周期才能在渲染的 output 中看到更改,因为它是异步执行的。
If you want to know when the state is actually updated, you could use the useEffect
hook and pass your (array) variable so it fires when the state is updated:如果您想知道 state 何时实际更新,您可以使用useEffect
挂钩并传递您的(数组)变量,以便在更新 state 时触发:
import React, {useState, useEffect} from 'react';
const Example = () => {
const [exampleArray, setExampleArray] = useState(['a', 'b', 'c']);
const handleClick = (e) => {
setExampleArray(null);
};
useEffect(() => {
console.log(exampleArray);
}, [exampleArray]);
return (
<button onClick={handleClick}>Test</button>
);
};
export default Example;
https://codesandbox.io/s/eloquent-faraday-n429p?file=/src/App.js https://codesandbox.io/s/eloquent-faraday-n429p?file=/src/App.js
For more information, please take a look at the React docs:有关更多信息,请查看 React 文档:
https://reactjs.org/docs/hooks-state.html https://reactjs.org/docs/hooks-state.html
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.