react-native - 从另一个屏幕调用函数时 useState 数组未更新
问题描述
我正在尝试通过作为导航参数发送到另一个屏幕的函数将项目添加到保存为本地状态(使用 useState)的数组中。
假设我有 ScreenA,它看起来:
ScreenA = () => {
const[obj,setObj] = useState({arr:[]})
addItem(item:any)=>{
setObj([...obj,arr:arr.concat(item)])
}
const objContext = {
obj,
addItem
}
return(
<objContext.Provider = value = {objContext}>
<ScreenB/>
<objContext/>
)
///
...
///
}
screenB = () => {
const {addItem} = useContext(Context)
return(
<View>
<Button onPress{()=>navigation.navigate("ScreenC",{addItemFunc:addItem})}
</Button>
</View>
)}
ScreenC = () => {
return(
<View>
<Button onPress={()=>route.params.addItemFunc(1)}/>
</View>
)}
export const Context = Tract.createContext({
obj: {},
addItem: (item: any) => null})
然而,在调试时,项目并没有被添加到数组中,只有在返回 ScreenA 之前添加的最后一个元素才会真正添加到数组中。
解决方案
由于您通过导航参数将引用作为回调函数传递,因此您可能会obj
在 addItem
. 换句话说,每次调用该函数时,obj 都将是一个空数组,正如您最初定义的那样。
还注意到您的初始状态和 addItem 在 json 结构方面不匹配。我会假设你只想要一个包含项目的数组(你的初始状态是一个包含项目数组的对象)
const[obj,setObj] = useState([])
尝试在 addItem 函数中使用回调函数,以便在调用 addItem 时获取最新状态,以便传播正确填充的数组。
addItem(item:any) => {
setObj(prevObjState => [...prevObjState, item])
}
如果你想要一个包含数组的对象
const [item, addItem] = React.useState({arr:[]});
const addAnotherItem = (item) => {
addItem(prevState => ({...prevState, arr: [...prevState.arr, item] }))
}
推荐阅读
- swift - 有没有办法将鼠标事件添加到 Interface Builder 中的 Action 中?
- slider - 如何更改 swiper 滑块 slidesPerView = 3 到 1 Onclick 事件
- javascript - 通过 forEach 函数监听多个 websocket 端口 - Nodejs
- wordpress - 移动上传的文件和 WordPress
- mysql - dpkg: 错误处理包 nginx (--configure)
- scala - 如何使用 Flink 作为案例类(scala)读取镶木地板文件?
- arrays - 在 vbscript 函数中扩展数组
- python - Selenium Python - 如果没有包含此类值的属性,如何获取文本字段的当前值?
- angular - Angular:如何从服务共享价值到整个项目 Angular 11?
- c# - 在 .NET Core 中将请求服务对象作为 null 传递