Question

在React中，我有一个名为views_res的状态，它是一个列表。我在viewsList（）中进行了API调用，该API应该将API调用的结果映射到此状态变量。但是，当我使用console.log（）进行调试时，我看到“开始”和“怎么做”，但是视图为空：（

我知道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。意思是，如果您在致电console.log之后setState，则希望“查看”更改。
尽管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)
})

从DOCS：

setState（）并不总是立即更新组件。它可能会批量更新或将更新推迟到以后。这使得在调用setState（）之后立即读取this.state可能是一个陷阱。而是使用componentDidUpdate或setState回调（setState（updater，callback）），确保在应用更新后均可以触发

修改
请注意这一部分：

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

不会记录任何内容，例如

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

只是JSX时钟内的一个字符串。如果要在JSX块中编写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">

ReactJS没有呈现我的API调用结果

1 个答案: