我对 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]访问它