React Native，将项推送到数组状态不起作用

Question

我需要将项推送到我的数组，但当我console.log这个数组时，它会为特定值显示"未定义"。我正在尝试btw从firebase存储中获取数据。如何正确地将项目添加到阵列

这是我的代码：

const [imagelinks, setImagelinks] = React.useState(['']);
const myFunction = () =>{
await storage()
.ref(`${_userid}`)
.list()
.then(result => {
result.items.forEach(async ref => {
await storage()
.ref(ref.fullPath)
.getDownloadURL()
.then(url => {
//get url
setImagelinks([...imagelinks, url]);
console.log('Links: ' + url);
});
});
//there it says undefined when logging...
console.log(imagelinks[0])
});
}

编辑：我可以使用以下内容吗？

const imagelinks = [];
//instead of 
const [imagelinks, setImagelinks] = useState([]);

Answer 1

更新state是一项异步任务。需要重新渲染组件才能获得更新的值。可以肯定的是，在myFunction之外添加控制台，在状态定义下面，例如：

const [imagelinks, setImagelinks] = React.useState(['']);
console.log(imagelinks)

如果您想使用结果来做一些逻辑(例如API调用(，您可以使用useEffect挂钩，例如：

useEffect(()=>{
if(imagelinks.length>0){
// do your things, except do not call setImagelinks in here to avoid having a loop because imagelinks is in the dependencies  array of useEffect.
}
},[imagelinks])

Answer 2

正如前面提到的答案，在设置新状态后，您不能在同一范围内访问它，因为它仍然具有该特定范围的旧值。

如果您确实需要在同一范围内存储和访问某个值，可以使用useRef钩子，也可以将该值存储在该范围内的变量中。

这里有一个示例，但请记住，更改引用的值不会触发重新渲染，因此这不会取代useState。

可变示例：

let imageLinksArray=[...imagelinks, url] //add this in your function
console.log(imageLinksArray) //you can pass this to the next function

useRef示例：

const imagelinksRef = useRef() //add this on top after your useState
...
imageLinksRef.current=[...imagelinks, url] //add this in your function
console.log(imageLinksRef.current) //this will give you the result you're expecting

您还可以查看这个npm包，它允许您在设置新状态后直接通过ref访问它(如果您确实需要的话(https://www.npmjs.com/package/react-usestateref