Журнал консоли возвращает 3 значения, когда в состоянии только один объект

Question

Я пытаюсь условно импортировать файл PDF, который я называю const techSheet ниже, но по какой-то причине, когда я console.log(wine.Code), он возвращает 3 вещи: неопределенный, правильный результат, правильный результат.

(результат console.log):

onewine.js:64 Code: undefined
onewine.js:64 Code: FGA-CHA17
onewine.js:64 Code: FGA-CHA17

В состоянии все выглядит нормально, в this.state.wine только один объект, поэтому я не могу понять, почему, # 1Он возвращает 3 значения # 2, почему первое не определено.

import React, { Component } from "react";
import API from "../utils/API";
import { Grid} from "semantic-ui-react";
import { Link } from "react-router-dom";


class OneWine extends Component {
  state = {
    wine: {}
  };

 componentDidMount() {

    API.getWine(this.props.match.params.id)
      .then(res => this.setState({ wine: res.data }))
      .catch(err => console.log(err));
  }

render() {
    const { wine } = this.state;
    const techSheet = require(`../TechSheets/Tech_${wine.Code}.pdf`);
    console.log("Code:", wine.Code)


    return (

     <a href = {techSheet} target = "_blank" rel="noopener noreferrer">
          <Button basic color="brown" target="_blank" rel="noopener noreferrer"> Tech Sheet
          </Button>
     </a>

    );
  }
}

export default OneWine;

У меня нет никаких других console.logs или чего-либо еще.Почему это выглядит как неопределенное для первого?

Answer 1

Обычно в таких случаях оператор log вызывается более одного раза. В вашем случае это будет поддерживаться тем фактом, что Render() действительно вызывается раньше ComponentDidMount() (см .: http://busypeoples.github.io/post/react-component-lifecycle/).

Render затем вызывается дважды после ComponentDidMount (и других обновлений состояния), имея правильное решение после вызова ComponentDidMount.

Answer 2

Потому что рендеринг вызывается раньше, чем componentDidMount () 1 раз, когда состояние все еще {wine: {}}.

Answer 3

Это связано с тем, как реагирует вызов метода рендеринга.

Метод рендеринга запускается перед componentDidMount.

см. Этот ответ: React render () вызывается до того, как componentDidMount ()