从React Native的另一个组件中调用“帮助器”功能？

问题描述

对不起，我发现React Native令人困惑且令人困惑。我将下面的代码用作“帮助”脚本，以保存可以由单独的组件访问的对象值。

LogContext.js

import React,{ useState } from 'react'

export const LogContext = React.createContext({
  set: "en",login: "false",setLog: () => {},});

export const LogContextProvider = (props) => {

  const setLog = (login) => {
    setState({set: "jp",login: login,setLog});
  };

  const initState = {
    set: "en",setLog,};

  const [state,setState] = useState(initState);

  return (
    <LogContext.Provider value={state}>
      {props.children}
    </LogContext.Provider>
  );
};

我的问题是能够从另一个组件调用“ setLog”以更改“状态”对象的值。例如：

AnyOtherComponent.js

import React,{ useState,useContext,createContext } from 'react'
import { Button,TouchableOpacity,Text } from 'react-native'
import { Actions } from 'react-native-router-flux'

import { LogContextProvider,LogContext } from './LogContext'

const AnyOtherComponent = (props) => {
  const status = useContext(LogContext);
  //status.setLog('true');  //also tried to call the 'update' here...

  const goToHome = () => {
  status.setLog('true');  //call doesn't update object values here either...
  Actions.home()
  }

   return (
   <>
     <Text>This is Proceed</Text>
     <Text>Passed SET: {JSON.stringify(status.set)}</Text>
     <Text>Passed LOGIN: {JSON.stringify(status.login)}</Text>
     <Button title="Update" onPress={goToHome} />
   </>
   )
}
export default AnyOtherComponent

Home.js

import React,Text } from 'react-native';
import { Actions } from 'react-native-router-flux';

import { LogContextProvider,LogContext } from './LogContext'

const Home = () => {
const status = useContext(LogContext);

   const goToAbout = () => {
      Actions.about()
   }
   const goToLogin = () => {
      Actions.login()
   }

   return (
     <LogContext.Provider value={status}>
      <TouchableOpacity style = {{ margin: 128 }} onPress = {goToAbout}>
         <Text>This is HOME!</Text>
         <Text>Passed SET: {JSON.stringify(status.set)}</Text>
         <Text>Passed LOGIN: {JSON.stringify(status.login)}</Text>
      </TouchableOpacity>
      {status.login === 'false' ? (
        <Button
          title="Go to Login"
          onPress={goToLogin}
        />
      ) : (
        <Button
          title="BroadCast"
          onPress={() => Actions.BroadCast()}
        />
      )}
     </LogContext.Provider>
   )
}
export default Home

我也曾尝试使用'useEffect'而不成功（如注释行所示）。在那种情况下，似乎引发了与我正在使用的导航有关的错误（React-Native-Router-Flux）。任何建议，不胜感激。

解决方法

您需要定义在创建上下文时更改状态的函数。 确保传递给createContext的默认值的形状与使用者期望的形状匹配！

export const LogContext = React.createContext({
  set: "en",login: "false",setLog: () => {},});

状态还包含updater函数，因此它将被向下传递到上下文提供程序中！

export const LogContextProvider = (props) => {
  const setLog = (login) => {
    setState({ set: "jp",login: login,setLog });
  };

  const initState = {
    set: "en",setLog,};
  const [state,setState] = useState(initState);

  return (
    <LogContext.Provider value={state}>{props.children}</LogContext.Provider>
  );
};

要使用上下文，可以使用Context.Consumer或useContext挂钩。

// with Context.Consumer
<LogContext.Consumer>
  {status => <Button onPress={() => status.setLog(true)} />}
</LogContext.Consumer>

//with useContext
const status = useContext(LogContext);
<Button onPress={() => status.setLog(true)} />

有关更多详细信息，React的文档提供了一个不错的how to updating Context from a component示例。