React Native Context API无法传递状态问题求助

问题根源 #

你在AppContext.Provider的value属性中使用了逗号表达式：(isLogin, setIsLogin, name)。JavaScript的逗号表达式会依次执行每个表达式，但最终只返回最后一个表达式的结果，所以你实际上只传递了name这一个值，这就是为什么其他状态和方法无法被子组件获取到。

修复方法 #

将需要传递的所有值包装成对象（推荐，属性名访问更清晰）或者数组，这里以对象为例：

修改后的完整代码

import React, { useState, createContext, useContext } from "react";
import { Text, View, Button } from "react-native";

const AppContext = createContext();

const AppProvider = (props) => {
  const [isLogin, setIsLogin] = useState(false);
  const [name, setName] = useState("molly");

  // 把值包装为对象传递
  return (
    <AppContext.Provider value={{ isLogin, setIsLogin, name }}>
      {props.children}
    </AppContext.Provider>
  );
};

const App = () => {
  return (
    <AppProvider>
      <Home />
    </AppProvider>
  );
};

const Home = () => {
  // 可以直接解构获取需要的属性，或者用变量.属性名访问
  const { isLogin, setIsLogin, name } = useContext(AppContext);

  console.log("context values", { isLogin, setIsLogin, name });

  const login = () => {
    setIsLogin(true);
  };

  if (!isLogin) {
    return (
      <View>
        <View>
          <Text>当前用户：{name}</Text>
        </View>
        <Button title="login" onPress={login} />
      </View>
    );
  }

  return (
    <View>
      <Text>已登录，欢迎{name}！</Text>
    </View>
  );
};

export default App;

关键修改点 #

1. Provider的value改为对象：用{ isLogin, setIsLogin, name }替代原来的逗号表达式，这样所有值都会被包含在对象中传递给子组件。
2. 子组件中解构获取值：通过const { isLogin, setIsLogin, name } = useContext(AppContext)直接解构出需要的状态和方法，代码更简洁易读。

内容的提问来源于stack exchange，提问作者MOLLY