Массив становится неопределенным в состоянии компонента (React) - PullRequest
Новая
       33

Массив становится неопределенным в состоянии компонента (React)

0 голосов
/ 21 февраля 2020

У меня есть массив в состоянии компонентов, который я хочу заполнить некоторыми данными из вызова API. Проблема в том, что он, по-видимому, всегда устанавливается как «неопределенный», и, следовательно, я не могу выполнять какие-либо функции на нем / представлять данные в DOM.

Это мой код прямо сейчас: 

class DocumentsPage extends Component {

    constructor(props) {
        super(props);
        this.state = { documents: [] };
    }

    componentDidMount() {
        this.getDocuments();
    }

    getDocuments = (e) => {
        fetch('api/GetDocuments').then(documents =>
            documents.json()).then(data => {
                this.setState({
                    documents: data
                });
            })
    }

    render() {
        return (
            <div>
                {this.state.documents.map(document => <div> {document} </div>)}
            </div>
            )
    }
}

Но я получаю эту ошибку при попытке представить данные: "TypeError: Невозможно прочитать свойство 'map' of undefined". Что я делаю неправильно?

РЕДАКТИРОВАТЬ: я перешел на this.state.documents.map, но теперь все равно ничего не представлено, никаких ошибок тоже нет. Что мне не хватает?

РЕДАКТИРОВАТЬ # 2: Решил это, написав вместо этого следующий код в render (): 

        return (
            <ul>
                {this.state.documents.map((document) => (
                    <li key={document.id}>{document.name}</li>))}
            </ul>
            )

1 Ответ

0 голосов
/ 21 февраля 2020

Напиши свой рендер вот так 

render() {
    return (
        <div>
            {this.state.documents && this.state.documents.map(document => <div> {document} </div>)}
        </div>
        )
}
...