React, Getting TypeError: Invalid attempt to destructure non-iterable instance when using global state with Context

Question

我尝试使用上下文全局访问状态，但出现以下错误：

TypeError: Invalid attempt to destructure non-iterable instance.
In order to be iterable, non-array objects must have a [Symbol.iterator]() method.

我试图通过调整上下文的使用来解决这个问题。

我想从中获取状态的文件：

const test = () => {
  const [selectedValueRound, setSelectedValueRound] = useState("10 rounds");
  return (
    <View>
      <RoundContext.Provider
        value={[selectedValueRound, setSelectedValueRound]}
      >
        <View>
          <Picker
            selectedValue={selectedValueRound}
            onValueChange={(itemValue, itemIndex) =>
              setSelectedValueRound(itemValue)
            }
          >
            <Picker.Item label="1 round" value="0"></Picker.Item>
            <Picker.Item label="2 rounds" value="1"></Picker.Item>
          </Picker>
        </View>
      </RoundContext.Provider>
    </View>
  );
};

上下文文件：

export const RoundContext = createContext(false);

我尝试调用上下文并出现错误的文件：

const SomeFile = () => {
  const [selectedValueRound, setSelectedValueRound] = useContext(RoundContext);

  return (
    <View>
      <Text>{selectedValueRound}</Text>
    </View>
  );
};
export default SomeFile;

Answer 1

为了使其正常工作，请确保将 SomeFile 包裹在 RoundContext.Provider 内，目前看来您还没有这样做。

Only wrapped components inside the provider can consume the context.

此外，确保每个 React 组件都以大写字母开头，Test 而不是 test

const Test = () => {
  const [selectedValueRound, setSelectedValueRound] = useState("10 rounds");
  return (
    <View>
      <RoundContext.Provider
        value={[selectedValueRound, setSelectedValueRound]}
      >
        <View>
          <Picker
            selectedValue={selectedValueRound}
            onValueChange={(itemValue, itemIndex) =>
              setSelectedValueRound(itemValue)
            }
          >
            <Picker.Item label="1 round" value="0"></Picker.Item>
            <Picker.Item label="2 rounds" value="1"></Picker.Item>
          </Picker>
        </View>
        <SomeFile/>
      </RoundContext.Provider>
    </View>
  );
};

React, Getting TypeError: Invalid attempt to destructure non-iterable instance when using global state with Context

React, Getting TypeError: Invalid attempt to destructure non-iterable instance when using global state with Context

javascript

reactjs

react-native