reactjs TypeError：undefined不可迭代(无法读取属性Symbol(Symbol.iterator))

fkvaft9z 于 2023-03-22 发布在 React

关注(0)|答案(7)|浏览(244)

我只是试图渲染从我的后端获得的项目列表，但得到这个错误，指示它是未定义的。然而，当我检查控制台日志时，我可以看到组件的状态在数组中肯定有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) [{…}, {…}, {…}, {…}, {…}]

你知道为什么它会这样说吗。state。pubsubtopics是未定义的？

reactjs

来源：https://stackoverflow.com/questions/55308778/typeerror-undefined-is-not-iterable-cannot-read-property-symbolsymbol-iterato

7条答案

按热度按时间

yws3nbqq1#

检查指定行号代码中使用的所有括号。例如：
在我的例子中，这是抛出错误-

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

当我纠正这个错误的时候

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

这对我来说很好。
请检查这是否解决了您的问题。

赞(0）回复(0）举报 2023-03-22

kupeojn62#

如果您最近更新了您的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']]
]);

赞(0）回复(0）举报 2023-03-22

wribegjk3#

你不能在一个数组上的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);
}

赞(0）回复(0）举报 2023-03-22

e4eetjau4#

在我的例子中，错误的发生仅仅是因为我迭代的数组的值是undefined。

赞(0）回复(0）举报 2023-03-22

rqqzpn5f5#

在我的例子中，我使用了数组反结构语法，其中当使用useQuery钩子时，返回输出是一个对象。
错误：
const [数据，错误，正在加载] = useQuery（GET_LOCATIONS）;
右：
const {数据，错误，正在加载} = useQuery（GET_LOCATIONS）;

赞(0）回复(0）举报 2023-03-22

piok6c0g6#

在我的例子中，我使用useEffect代替useState。
错误：
const [toggle，setToggle] = useEffect（false）;
右：
const [toggle，setToggle] =useState（false）;

赞(0）回复(0）举报 2023-03-22

vmjh9lq97#

添加此行代码和index.js的末尾