NYMEZIDE
@NYMEZIDE
резюме - ivanfilatov.ru

Почему не работает React компонент в одном случае и работает в другом?

class Contact extends React.Component {
    constructor(props) {
        super(props);
        this.state = { name: props.name, value: props.value };
    }
    render() {
        return <div>
            <p>{this.state.name}: {this.state.value}</p>
        </div>;
    }
}

class ContactList extends React.Component {
    constructor(props) {
        super(props);
        this.state = { contacts: props.contacts };
    }
    render() {
        return <div>
            {
                this.state.contacts.map(function (c) {
                    return <Contact key={c.name.toString()} name={c.name} value={c.value} />
                })
            }
        </div>;
    }
}

function ContactListTwo(props) {
    const contacts = props.contacts.map((c) =>
        <Contact key={c.name.toString()} name={c.name} value={c.value} />
    );
    return (
        <div>
            {contacts}
        </div>
    );
}

class Root extends React.Component {
    constructor(props) {
        super(props);
        this.state = { contacts: [] };
    }
    loadData() {
        var xhr = new XMLHttpRequest();
        xhr.open("get", this.props.apiUrl, true);
        xhr.onload = function () {
            var data = JSON.parse(xhr.responseText);
            this.setState({ contacts: data.contacts });
        }.bind(this);
        xhr.send();
    }
    componentDidMount() {
        this.loadData();
    }
    render() {
        return <div>
            <ContactList contacts={this.state.contacts} />
            <ContactListTwo contacts={this.state.contacts} />
        </div>;
    }
}

ReactDOM.render(
    <Root apiUrl="/api/contacts" />,
    document.getElementById("content")
);


почему в одном случае -ContactList - не выводит ничего, и ошибки в консоли нет.
а во втором случае - ContactListTwo - все отрабатывает, рисует.

когда данные статические - работают оба компонента. когда подгрузка с api - только тот который ContactListTwo справляется.

может ContactList рисует до получения данных? render срабатывает раньше, не понимаю. тогда почему другой работает?
  • Вопрос задан
  • 634 просмотра
Пригласить эксперта
Ответы на вопрос 1
@LiguidCool
Всё правильно, вам нужно вызывать setState, чтоб перерендерить компонент. В ином случае при рендере ещё нечего показать, а когда уже есть, то не вызывается рендер.
Второй соответственно работает потому, что xnr.onload... setState
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы