是否更改子组件上下文文件中的状态值

Question

试图理解上下文api，我理解道具是传递下来的。我正在尝试将上下文文件值的状态更改为另一个数字，如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 中的提供程序中包装的所有内容

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 }/>
)         

Answer 1

我想明白了，而不是导入

const value = useContext(PointsContext);

导入this，这样就可以访问上下文文件中的setState。只要你把它导入到任何屏幕上，你就可以访问useState来更改内容。

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

剩下的可能会变成这样！

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

这个教程帮了我很大的忙，感谢devEd，他是我的最爱之一！DevEd Youtube React State