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

Question

很抱歉，我发现 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",
    login: "false",
    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, { 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 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）。非常感谢任何建议。

Answer 1

您需要定义在创建 de Context 时更改状态的函数。 确保传递给 createContext 的默认值的形状与消费者期望的形状相匹配！

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

State 还包含更新函数，因此它将被传递到上下文提供程序！

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

  const initState = {
    set: "en",
    login: "false",
    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 示例。