Почему я получаю два ответа, когда регистрирую свое состояние React, setState с помощью запроса API выборки?

Question

Я получаю два ответа от console.log () моего состояния в React.Первый пустой, а второй содержит данные, которые я пытаюсь распечатать.

[] пустой массив

[{…}] 0: {id: 1, дата: "2011-07-01T10: 30: 30.000Z", имя: "Джон"} length: 1 proto : Array (0)

Мой код выглядит следующим образом:

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

componentDidMount(){
    this.fetchSessionData();
}

fetchSessionData = () => {
    fetch(`http://localhost:3000/sessions/${this.props.match.params.id}`)
    .then(response => response.json())
    .then(session => this.setState({session:session});
}

render() 
{
    console.log(this.state.session);
    return(
        <div>
            <p>Hello world + {this.props.match.params.id}</p>
        </div>
    )
}   

Если было более одного объекта javascriptв моем ответе я также вижу что-то вроде:

[] пустой массив

[{…}] 0: {id: 1, date: "2018-11-01T10: 30: 30.000Z ", имя:" Джон "} длина: 1 proto : Массив (0)

[{…}] 0: {id: 1, date:"2018-11-01T10: 30: 30.000Z ", имя:" Джон "}, {id: 1, дата:" 2018-07-22T12: 37: 01.000Z ", имя:" Стив "}, длина: 2, proto : Array (0)

И так далее, и тому подобное.Я подозреваю, что это связано с Обещаниями или жизненным циклом, но не смог найти ответ.Кроме того, когда я пытаюсь получить доступ к значениям состояния, таким как this.state.session.id, он возвращает неопределенное значение.Что тут происходит?

Answer 1

Каждый раз, когда выполняется метод рендеринга, вы увидите консольный оператор.

Первая консоль: Когда компонент смонтирован.

Вторая консоль: Когда компонент обновляется / перерисовывается.

Когда компонент обновляется? - когда компонент получает какие-либо новые входы (реквизиты) - когда компонент обновляет состояние своего собственного контекста - компонент делаетне обновленное состояние, но вызывает forceUpdate

Если я выполню setState несколько раз, будет ли печататься этот номер n раз? - no setState не является асинхронной операцией, React выполнит их пакетами.

Answer 2

Ваш консольный журнал находится в функции render (), поэтому он запускается каждый раз, когда компонент выполняет рендеринг (или повторный рендеринг).Это нормально.Он рендерится при первой загрузке, а затем рендерит, когда завершает получение данных и обновление состояния.

Кроме того, this.state.session - это массив, содержащий ваш объект json.Так что вам придется написать что-то вроде this.state.session[0].id