从另一个屏幕调用函数时 useState 数组未更新
Posted
技术标签:
【中文标题】从另一个屏幕调用函数时 useState 数组未更新【英文标题】:useState array not updated when invoking function from another screen 【发布时间】:2021-04-16 03:42:45 【问题描述】:我正在尝试通过一个函数将项目添加到保存为本地状态(使用 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 之前添加的最后一个元素才真正添加到数组中。
【问题讨论】:
【参考方案1】:由于您通过导航参数将引用作为回调函数传递,您可能会在addItem
中遇到围绕obj
的陈旧闭包。换句话说,每次调用该函数时,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] ))
【讨论】:
以上是关于从另一个屏幕调用函数时 useState 数组未更新的主要内容,如果未能解决你的问题,请参考以下文章