从子组件更改上下文文件中的状态值？答案

【问题标题】：Change state value in context file from child component?从子组件更改上下文文件中的状态值？
【发布时间】：2021-07-04 14:35:34
【问题描述】：

试图理解上下文 api，我理解 props 是传下来的。我正在尝试将 Context 文件值的状态更改为另一个数字，例如 50。

创建的上下文文件

import React, { useState, createContext } from "react";

export const PointsContext = createContext();

export const PointsProvider = (props) => {
  const [points, setPoints] = useState(0);**<--WANT TO CHANGE THIS**

  return <PointsContext.Provider value={points}>{props.children}</PointsContext.Provider>;
};

在 App.js 的 Provider 中包装所有内容

import {PointsProvider } from "./PointsContext";

<PointsProvider>
     <ChildComponent>
</PointsProvider>

“ChildComponent”是提供的上下文

import React, { useState, useEffect, useContext } from "react";
import { PointsContext } from "../PointsContext";

const value = useContext(PointsContext);

return(
    <Button title="ChangeNumber" onPress={() => Change value to 50 }/>
)

【问题讨论】：

标签： reactjs react-native state react-props use-state

【解决方案1】：

我想通了，而不是导入

const value = useContext(PointsContext);

import this，它可以访问上下文文件中的 setState。只要您将其导入任何屏幕，您就可以访问该 useState 来更改内容。

const [points, setPoints] = useContext(PointsContext);

其余的可能会像这样！

<Button title="ChangeNumber" onPress={() => setPoints(50)}/>
<Text>{points}</Text>

感谢 devEd，本教程帮助很大，他是我的最爱之一！ DevEd Youtube React State

【讨论】：