我對 API 的調用沒有更新 React 狀態

Question

我是 React 的新手，但看着類似的問題和答案，我認為這應該有效。 但它只是返回空值。 如果我將默認狀態設置為空數組，它只會返回空數組。 我也沒有收到任何錯誤，並且正在調用 fetch。

import React, { Component } from     "react";
import "./App.css";
import Header from "./Header";
import BreweriesContainer from "./BreweriesContainer";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      names: null
    };
  }

  componentDidMount() {
    fetch("https:api.openbrewerydb.org/breweries?by_state=Colorado")
      .then(response => response.json())
      .then(jsonData => {
        this.setState({ names: jsonData.name });
        console.log(this.state.names);
      });
  }

  render() {
    return (
      <div className="App">
    <Header />
    <p>{this.state.names}</p>
    <BreweriesContainer />
  </div>
    );
  }
}

export default App;

Answer 1

 this.setState({ names: jsonData.name },() =>{
        console.log(this.state.names);
});

在 setstate 回調中的控制台，您將在渲染函數中獲得更新的狀態或控制台

Answer 2

您的jsonData.name將不起作用，因為該請求返回一個具有多個值的數組，其鍵名為name 。 所以jsonData.name將是未定義的。 試試jsonData[0].name 。

如果您希望所有名稱都使用這樣的 map 函數：

this.setState({ names: e.map( (object) => object.name ) });

另外，您應該像@Kishan 所說的那樣執行控制台日志：

this.setState({ names: jsonData.name },() =>{
        console.log(this.state.names);
});

Answer 3

在 setState 調用后立即 console.log 不會按預期工作，因為 setState 異步更新狀態，並且 console.log 語句不會等待 setState 在打印出前一個/默認值之前完成

Answer 4

這不只是一個錯字嗎？

this.setState({names: jsonData.name });

也許應該是

this.setState({names: jsonData.names });

Answer 5

Diogo 有你的答案， jsonData是一個數組，所以你需要使用jsonData[0]訪問它