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

Question

[Иван Филатов]

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 срабатывает раньше, не понимаю. тогда почему другой работает?

Answer 1

[Иван]

Всё правильно, вам нужно вызывать setState, чтоб перерендерить компонент. В ином случае при рендере ещё нечего показать, а когда уже есть, то не вызывается рендер.
Второй соответственно работает потому, что xnr.onload... setState

Comments

[Иван Филатов]

а где мне в class ContactList сделать setState ?

в конструкторе сделать this.setState({ contacts: props.contacts }); ?

[Максим]

Иван Филатов: зачем вам там state? считывайте сразу из props

[Максим]

Иван Филатов: в рендере компонента - this.props.contacts...

[Иван Филатов]

Максим: class ContactList extends React.Component {
constructor(props) {
super(props);

const contacts = props.contacts.map((c) =>

);
}
render() {
return
{this.contacts}
;
}
}

не сработало

[davidnum95]

уберите из конструктора const contacts = props.contacts.map((c) =>), затем в методе render напишите const contacts = this.props.contacts.map((c) =>), а в return без this, просто {contacts}

[Иван Филатов]

davidnum95: а почему нельзя в state сохранить?

[davidnum95]

Иван Филатов: можно, но не в конструкторе это делать

[Иван]

Иван Филатов: вы можете в конструкторе вызывать асинхронную функцию запроса, а на её результат вешать в коллекции setState.

[Иван Филатов]

Иван: пример не подкините?

[Иван]

Иван Филатов: Вот
Обратите внимание, что на этапе инициализации (конструктор) в параметры folder и images пишутся пустые массивы. Соответственно в первый рендер ничего показано не будет (у меня на самом деле там прелоадер загрузится).
Также в функции componentWillMount() вызываются асинхронные фунции запроса JSON'ов (через Axios, рекомендую тоже его использовать). Как только фунции получат данные, они закинут их в стейт и следом будет перерендер.

PS
Не следует брать проект примером, там много говнокода.