我在React Native中的以下代码中收到此错误：
Invalid attempt to destructure non-iterable instance. In order to be iterable, non-array object must have a [symbol.iterator]() method
counter-context.js
import React, {useState, createContext} from 'react'
export const CounterContext = createContext();
export const CounterContextProvider = props => {
const [count, setCount] = useState(0)
return (
<CounterContext.Provider value={[count, setCount]}>
{props.children}
</CounterContext.Provider>
);
}
counter-display.js
import React, { useContext } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { CounterContext, CounterContextProvider } from '../context/counter-context';
export default function Counter() {
const [count] = useContext(CounterContext);
return (
<CounterContextProvider>
<View style={styles.sectionContainer}>
<Text style={styles.sectionTitle}>{count}</Text>
</View>
</CounterContextProvider>
)
}
const styles = StyleSheet.create({
sectionContainer: {
flex: 1,
padding: 24,
}
App.js
<SafeAreaView>
<ScrollView
contentInsetAdjustmentBehavior="automatic"
style={styles.scrollView}>
<View style={styles.body}>
<Counter/>
</View>
</ScrollView>
</SafeAreaView>
是什么原因？似乎在做出反应。
您的useContext(CounterContext)呼叫存在于不是的后代的组件中<CounterContextProvider>。在<CounterContextProvider>必须的祖先<Counter>，而不是一个后代。
至于您收到的错误消息，这是由于赋值语句中的数组解构语法const [count] = useContext(CounterContext);导致对返回值的[Symbol.iterator]()方法（如果存在）进行隐式调用。由于作用域中没有提供程序，并且上下文是在未传递默认值的情况下创建的，因此您实质上是在评估const [count] = undefined;
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句