从另一个屏幕调用函数时 useState 数组未更新答案

【问题标题】：useState array not updated when invoking function from another screen从另一个屏幕调用函数时 useState 数组未更新
【发布时间】：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 之前添加的最后一个元素才真正添加到数组中。

【问题讨论】：

标签： react-native navigation react-hooks react-context react-navigation-v5

【解决方案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] }))
  }

【讨论】：