TypeError：未定义不可迭代（无法读取属性Symbol（Symbol.iterator））

Question

只是尝试渲染从我的后端获得的项目列表，但收到此错误，表明它未定义。然而，当我检查控制台日志时，我可以看到组件的状态在数组中肯定有 5 个项目。

class PubSubTopics extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            pubsubtopics: ['one', 'two', 'three'],
        }
    }

    componentDidMount() {
        this.callBackEndAPI()
            .then(res =>
                this.setState({pubsubtopics: res.express}))
            .catch(err => console.log(err));
        console.log('after setting state');
        console.log(this.state.pubsubtopics);
    }


    callBackEndAPI = async () => {
        const response = await fetch('/listtopics');
        const body = await response.json();

        if(response.status !== 200){
            throw Error(body.message)
        }
        console.log('after API responded');
        console.log(body.topics);
        return body.topics;
    }
    render(){
        const list = [];
        for(const[index, value] of this.state.pubsubtopics){
            list.push(<li key={index}>{value}</li>)
        }
        return(
            <div>
                <ul>
                    {list}
                </ul>
                <button onDoubleClick={this.handleClick}/>
            </div>
        )
    }
}

控制台日志：

after setting state
index.js:21 (3) ["one", "two", "three"]
index.js:32 after API responded
index.js:33 (5) [{…}, {…}, {…}, {…}, {…}]

知道为什么它说

this.state.pubsubtopics

未定义吗？

Answer 1

检查代码中指定行号处使用的所有括号，例如：

在我的例子中，这是抛出错误 -

const [query, setQuery] = useState['']

当我纠正这个问题时，

const [query, setQuery] = useState('')

这对我来说效果很好。

请检查这是否解决了您的问题。

Answer 2

如果您最近更新了 MacOS，并且突然出现此错误，则一定是因为 MacOS Monterey 未在操作系统列表中列出。

将此行添加到index.js的顶部，然后此错误将被修复。

const nameMap = new Map([
    [21, ['Monterey','12']],
    [20, ['Big Sur', '11']],
    [19, ['Catalina', '10.15']],
    [18, ['Mojave', '10.14']],
    [17, ['High Sierra', '10.13']],
    [16, ['Sierra', '10.12']],
    [15, ['El Capitan', '10.11']],
    [14, ['Yosemite', '10.10']],
    [13, ['Mavericks', '10.9']],
    [12, ['Mountain Lion', '10.8']],
    [11, ['Lion', '10.7']],
    [10, ['Snow Leopard', '10.6']],
    [9, ['Leopard', '10.5']],
    [8, ['Tiger', '10.4']],
    [7, ['Panther', '10.3']],
    [6, ['Jaguar', '10.2']],
    [5, ['Puma', '10.1']]
]);

Answer 3

您无法在数组上的

for..of

迭代中进行破坏，因为您尝试迭代的内容是不可破坏的。你本质上是在每次迭代中尝试这样做

const [index, value] = this.state.pubsubtopics[0]
// this is equivalent to const [index, value] = "one", for example.

您想要做的是使用

this.state.pubsubtopics.entries()

，它返回一个键值对数组。这是一个例子：

const arr = ['a', 'b'];
// arr.entries() is [[0, 'a'], [1, 'b']]
for (const [index, element] of arr.entries()) {
    // const [index, element] = [0, 'a'] on 1st iteration, then [1, 'b'], etc. 
    console.log(index, element);
}

Answer 4

就我而言，发生错误只是因为我迭代的数组的值是

undefined

。

Answer 5

在我的例子中，我使用数组解构语法，其中使用 useQuery 挂钩时返回输出是一个对象。

错误：

const [数据，错误，加载] = useQuery(GET_LOCATIONS);

右：

const {数据，错误，加载} = useQuery(GET_LOCATIONS);

Answer 6

就我而言，我使用 useEffect 代替 useState。

错误：

const [toggle, setToggle] = useEffect(false);

右：

const [toggle, setToggle] = useState(false);

Answer 7

首先，这不应该起作用：

for(const [index, value] of ['one', 'two', 'three']) {
  console.log({index, value}); //this displays {index: "o", value: "n"}
}

看起来您想使用

index

的

key

值，您可以通过使用

map

数组函数获得该值。

return(
  <div>
    <ul>
      {(this.state.pubsubtopics || []).map((value, index) => (
        <li key={index}>{value}</li>
      )}
    </ul>
    <button onDoubleClick={this.handleClick}/>
  </div>
);

我不确定为什么

this.state.pubsubtopics

会是未定义的，但也许当它完全加载时就不会是未定义的。

Answer 8

添加这行代码和index.js末尾

serviceWorker.unregister();

然后确保导入它，或者如果它被注释，请取消注释导入代码，它将起作用。