javascript - ReactJS 不呈现我的 API 调用结果

Question

在 React 中，我有一个名为 views_res 的状态，它是一个列表。我在 viewsList() 中进行 API 调用，它应该将 API 调用的结果映射到这个状态变量。但是，当我使用 console.log() 进行调试时，我看到了“开始”和“WHAT UP DOE”，但 View 是空的:(

我知道 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);
  }

Answer 1

我不确定您为 $.getJson 使用的是哪种库(是 jQuery 吗？)但请注意 setState is an asynchronous operation .意思是，如果你在调用 setState 之后 console.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() does not always immediately update the component. It may batch or defer the update until later. This makes reading this.state right after calling setState() a potential pitfall. Instead, use componentDidUpdate or a setState callback (setState(updater, callback)), either of which are guaranteed to fire after the update has been applied

编辑
注意这部分:

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

不会记录任何内容，因为

console.log("play_count", {item.play_count})

只是 JSX block 中的一个字符串。如果你想在 JSX block 中编写 JavaScript 表达式，你应该用大括号 ({}) 将它括起来:

看一个运行示例:

function App() {
  return (
    <div>
     <div>
        console.log("i am just a string")
        {console.log('I will show in the console')}
      </div>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root">