时间戳

首页 > 解决方案 > 从子组件更改上下文文件中的状态值？

reactjs - 从子组件更改上下文文件中的状态值？

问题描述

试图理解上下文 api，我理解道具是传下来的。我正在尝试将我的 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 }/>
)

标签： reactjsreact-nativestatereact-propsuse-state

解决方案

我想通了，而不是导入

const value = useContext(PointsContext);

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

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

其余的可能会像这样！

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

本教程非常感谢 devEd，他是我的最爱之一！ 开发 Youtube React 状态

推荐阅读