從數據庫中獲取對象數組並用反應顯示它

Question

當我遇到這個問題時，我試圖獲取一個對象數組。 抱歉我的代碼混亂，我是初學者。

export class App extends Component {
  state ={
    character:[]
  }
  componentDidMount(){

     fetch('https://swapi.dev/api/people/').then(data => data.json()).then(res =>{
     this.setState(() =>{
       const ar = res.results

       return {
         character: ar
       }
     })
    })


  }
  render() {
    return (
      <div>
         test

          {console.log(this.state.character[0])}
      </div>
    )
  }
}

該代碼起初對我來說很好，直到我將控制台日志更改為{console.log(this.state.character[0].name)}它說“無法讀取未定義的屬性”，即使第一行顯示 object完美

Answer 1

您的App組件在componentDidMount生命周期方法中獲取數據，該方法將在第一次掛載后執行。 {console.log(this.state.character[0].name)}顯示錯誤“無法讀取undefined的屬性，因為當組件第一次安裝時，數據尚不可用，這意味着this.state.character仍然存在一個空數組。所以當嘗試訪問this.state.character[0].name時，就像說給我undefined.name的值，這會給你一個錯誤，因為name屬性在undefined上不存在。要解決這個問題您可以在條件中檢查character.length是否，然后嘗試訪問.name 。

例子

render() {
    return (
      <div>
         test

          {this.state.character.length && <p>{this.state.character[0].name}</p>}
      </div>
    )
  }

Answer 2

Fetch 是asynchronous的，所以你需要一些時間才能得到結果，但在此之前你的 jsx 已經被調用了。 所以最好使用條件jsx。 請檢查下面的完整示例，其中我在 li 元素下顯示了所有字符數組的名稱。

export class App extends React.Component {
    state = {
        character: []
    };

    componentDidMount() {

        fetch('https://swapi.dev/api/people/').then(data => data.json()).then(res => {
            this.setState(() => {
                const ar = res.results;

                return {
                    character: ar
                }
            })
        })
    }

    render() {
        return (
            <div>
                test
                {
                    this.state.character && this.state.character.length && this.state.character.map((item, index) => {
                       return <li key={index}>{item.name}</li>
                    })
                }
            </div>
        )
    }
}

export default App;

Answer 3

所以這行不通。 數據還沒有。 有很多方法可以解決它。 最簡單的一種是在 state object 中預定義 object 結構，這不是很動態。 否則簡單的.length + if + else將完成這項工作。