Javascript ReactJS不呈现我的API调用结果

在React中，我有一个名为views\u res的状态，它是一个列表。我在viewsList（）中进行了一个API调用，它应该将API调用的结果映射到这个状态变量。但是，当我使用console.log（）进行调试时，我看到“start”和“WHAT UP DOE”，但视图是空的：(

我知道API端点是正确的，因为Postman向我展示了正确的JSON响应。但是，我的状态变量根本没有接收到数据。我不确定我的错误在哪里

为了隐私，我修改了API的确切端点

componentDidMount() {
    this.ViewsList();
  }

  // Gets views from Wistia API
   ViewsList() {
    console.log("start", this.state.views);
// API call
$.getJSON(
  "url"
)
  // JSON format
  .then(response => {
    response.json();
  })
  .then(data => {
    // Map over data
    let views_res = data.response.map(item => (
      <div>
        console.log("play_count", {item.play_count})
        <h1>{item.play_count}</h1> */}
      </div>
    ));
    // Set the state
    this.setState({ views: views_res });
  });
console.log("WHAT UP DOE", this.state.views);
  }

componentDidMount（）{
this.ViewsList（）；
}
//从Wistia API获取视图
视图列表（）{
log（“开始”，this.state.views）；
//API调用
$.getJSON(
“url”
)
//JSON格式
。然后（响应=>{
json（）；
})
。然后（数据=>{
//映射数据
let views\u res=data.response.map（项=>(
log（“play_count”，{item.play_count}）
{item.play_count}*/}
));
//设定状态
this.setState（{views:views\u res}）；
});
log（“WHAT UP DOE”，this.state.views）；
}

我不确定您使用的是哪种库。

$.getJson

（是

jQuery

？），但请注意

setState

。这意味着，如果调用

setState

，您希望“看到”控制台的更改。log 不过，

setState

还有第二个参数，它是一个回调函数，在实际更新状态后将被触发

this.setState({ views: views_res }, () => {
    // this is a callback function for setState.
  // this coode will run just after the state actually updated
  console.log("WHAT UP DOE", this.state.views)
})

从文档中：

setState（）并不总是立即更新组件。它可能会批处理更新或将更新推迟到以后。这使得在调用setState（）后立即读取This.state成为一个潜在的陷阱。相反，请使用componentDidUpdate或setState回调（setState（更新程序，回调）），其中任何一个都保证在应用更新后触发

编辑
请注意，本部分：

<div>
  console.log("play_count", {item.play_count})
  <h1>{item.play_count}</h1> */}
</div>

只是

JSX

块中的字符串。如果要在

JSX

块中编写JavaScript表达式，应使用大括号（

{}

）将其包装：

请参见运行示例：

函数应用程序（）{
返回(
log（“我只是一个字符串”）
{console.log（'我将在控制台中显示'）}
);
}
const rootElement=document.getElementById（“根”）；
ReactDOM.render（，rootElement）；

是否将

ViewsList

绑定到类？在构造函数中

this.ViewsList=this.ViewsList.bind（this）

setState也是异步的。您可以在setState

this.setState（{views:views\u res}，（）=>{console.log（this.state.views）}）上的回调第二个选项中查看它

另外，不要像这样创建JSX代码。获取数据，将其设置为您的状态，然后像往常一样在

render

方法中创建JSX。您是否试图将响应转换为json并将其传递到下一节？因为有了括号，

response.json（）；

将不会返回用于下一节

then（）

。

“play\u count”

打印出来了吗？还要注意这一点。（一般来说，这是承诺，不只是本地反应），但是

play\u count

没有被记录，这意味着状态甚至没有被设置。为什么要记录它呢？它只是

JSX

块中的一个

字符串
console.log("play_count", {item.play_count})