Question

如何更新存储在 React Context 中的 State 属性

2022-06-07

1455

reactjs react-native

我已经使用 React Context 创建了状态，但是当我尝试更新子组件中的状态属性时，它不起作用，有时是语法错误，有时是逻辑错误，有人可以帮助我吗？

in App.js 
  const [car, setCar] = useState();
  <AuthContext.Provider value={{ car, setCar }}>
      
          <NavigationContainer>
            {car ? (
              <CustomerHomeStackNavigator />
            ) : (
              <Splash></Splash>
            )}
          </NavigationContainer>

      </AuthContext.Provider>

在子组件中我想更新其 offer 属性但它不起作用，我这样做了但没有成功

const carContext = React.createContext();
carContext.setCar.data.offer= "1000"

汽车状态有这个数据对象

 Object {
  "aud": "The_Aud",
  "data": Object {
    "address": "delhi",
    "area": "delhi",
    "city": "delhi",
    "contactnumber": "122222222222",
    "offer": "20000000"
   
  },
  "exp": 1654602892,
  "iat": 1654599292,
  "iss": "The_claim",
  "nbf": 1654599302,
  "stakeHolder": "owner",
}

Answer 1

setCar 不是对象，而是一个函数。您可以使用 useContext 获取值，可以像下面这样更新对象

const {car,setCar}= useContext(AuthContext);
setCar(prev => {...prev,data : {...prev.data,offer:"10000"}})

选项 2：

var updatedCar = {...car};
updatedCar.data.offer = "1500";
setCar(updatedCar)

Answer 2

setCar 是函数，因此要进行更新，您必须调用函数而不是简单的变量赋值。接下来，要获取上下文，如果您要使用类组件，则必须使用 useContext 钩子或静态字段 context 。您不能使用 createContext 获取上下文值，它仅用于创建上下文对象。

const { car, setCar } = useContext(AuthContext)
// ...
setCar(data)

有关更多详细信息，请参阅文档 https://reactjs.org/docs/context.html#updating-context-from-a-nested-component