對React中的未定義錯誤感到困惑

Question

為可能簡單的問題道歉。 我有一些React代碼，我想記錄我的api響應。 當我在console.log(this.state.api_response_name)我的控制台會記錄一個響應。 當我使用api_response_name.name嘗試如下時，即使在我的json中有一個名稱字段，我在控制台日志中也未定義。 我的問題是為什么？ 我是JS和React的新手，很抱歉，如果這是一個非常簡單的答案，並且很高興能夠鏈接到那些能夠很好地描述的文章。 我找不到任何有意義的東西。

import React, { Component } from 'react';
import { Button, Form } from "semantic-ui-react";
import { api31Call } from '../helpers';

export default class PulseInputForm extends Component {
    constructor(props) {
        super(props)
        this.state = {
            project: "",
            mode:'view',
            api_response_name:{},
            loading:false
        }
        this.handleChange = this.handleChange.bind(this)
        this.handleSave = this.handleSave.bind(this);
        this.handleEdit = this.handleEdit.bind(this);
    }

    handleChange(event) {
        this.setState({value: event.target.value});
    }
    handleSave() {
        this.setState({mode: 'view'});
      }

    handleEdit() {
        this.setState({mode: 'edit'});
      }

    renderInputField() {
      if(this.state.mode === 'view') {
        return <div>working</div>;
      } else {
        return (
            <p>
              <input
                onChange={this.handleChange}
                value="something else"
              />
            </p>
        );
      }
    }

    renderButton() {
      if(this.state.mode === 'view') {
        return (
            <button onClick={this.handleEdit}>
              Edit
            </button>
        );
      } else {
        return (
            <button onClick={this.handleSave}>
              Save
            </button>
        );
      }
    }

    componentDidMount() {
      this.setState({loading: true})
      // not_localized = hard coded project 
        api31Call('GET', '/projects','/not_localized')
            .then(data => {
              this.setState({
                loading: false,
                api_response_name: data
              })
            })
      }

    render() {  
        const text = this.state.loading ? "loading..." : console.log(this.state.api_response_name.name)     
        return (
        <div>
        <Form >
            <Form.Field>
                <label>Project</label>
                <input name="project" placeholder="Your Project" onChange={this.handleChange} />
            </Form.Field>
            <Form.Field>
                <label>Timeframe</label>
                <input placeholder="Integer e.g. 50 (Max 90 Days)" />
            </Form.Field>
          {text}
          {this.renderInputField()}
          {this.renderButton()}
         </Form> 

        </div>
        )
      }
}

Answer 1

componentDidMount（）方法在將組件輸出呈現給DOM之后運行。（您可以在此處閱讀有關React生命周期的內容）因此，在組件的第一次呈現中， api_response_name沒有任何內容，並且狀態與您在constructor定義的相同。 但是在將組件安裝到DOM中之后，將調用函數componentDidMount()並使用此代碼

componentDidMount() {
    this.setState({loading: true})
    // not_localized = hard coded project
    api31Call('GET', '/projects','/not_localized')
        .then(data => {
          this.setState({
            loading: false,
            api_response_name: data
          })
        })
}

執行。 所以，之后狀態發生變化，你在api_response_name中有了名字。 但是，在掛載一次調用的render函數之前， this.state.api_response_name等於{} 。 因此，您在此時獲得異常，您的組件將崩潰。 但是，您可以在構造函數中將loading設置為false ，然后所有事情都將成為okey。 因為，然后在第一次渲染loading是false並且文本簡單地等於loading並且在安裝componentDidMount()之后執行並且在api調用之后正確地更改狀態並且您的組件將完美地工作。