TypeError: 정의되지 않은 것은 반복할 수 없습니다(속성 기호(Symbol.iterator)를 읽을 수 없습니다).

TypeError: 정의되지 않은 것은 반복할 수 없습니다(속성 기호(Symbol.iterator)를 읽을 수 없습니다).

백엔드에서 가져온 항목의 목록을 렌더링하려고 했지만 정의되지 않았음을 나타내는 오류가 나타납니다.그러나 콘솔 로그를 확인하면 컴포넌트 상태가 어레이에 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'라고 쓰여있는지 아세요?

지정된 라인 번호의 코드에 사용되는 모든 대괄호를 확인합니다.예:
내 경우엔 이건 실수였어

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

제가 이걸 고쳤을 때

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

This was working fine for me.
Please check if this fixes your problem.

최근에 MacOS를 업데이트했는데 이 오류가 갑자기 나타나는 경우 MacOS Montrey가 OS 목록에 없기 때문일 수 있습니다.

이 행을 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']]
]);

파괴할 수 없다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);
}

제 경우, 에러는 단순히 반복하고 있던 어레이에 장애가 발생하였습니다.undefined가치가 있는 만큼.

제 경우 useQuery 훅을 사용할 때 return output이 객체가 되는 어레이 destructure 구문을 사용하고 있었습니다.

틀렸다:

const [data, error, loading]= useQuery(GET_LOCATIONS);

오른쪽:

const {data,error,loading} = useQuery(GET_LOCATIONS);

이 코드 행과 index.js의 끝을 추가합니다.

serviceWorker.unregister();

그런 다음 Import를 수행하거나 코멘트가 있는 경우 Import 코드를 코멘트 해제하면 동작합니다.

언급URL : https://stackoverflow.com/questions/55308778/typeerror-undefined-is-not-iterable-cannot-read-property-symbolsymbol-iterato