如何从API获取的值显示到ReactJS页面中

Posted 2023-01-17

let resultofapi被全局声明，我使用从API接收的值对其进行了初始化。我想将该值显示在我的react js页面（在表中）。当我在API内打印值时，它返回我输出"similarity_score":0.9999999404。但是当我在API之外访问它时，它给了我value = undefine

pd.usage()
  .then(response => 
    console.log(response);
  )

  .catch(error => 
    console.log(error);
  );
**pd.semantic(
  pd
    .semantic(textarea1, textarea2)//these are forms data
    .then(response => 
      console.log(response); //output="similarity_score":0.670276463
     *resultofapi = response;* //output=resultofapi="similarity_score":0.670276463*
    )**
    .catch(error => 
      console.log(error);
    )
)
  .then(response => 
    console.log(response); 
  )
  .catch(error => 
    console.log(error);
  );
console.log(resultofapi)//output=undefined

答案

创建一个状态对象，并使用API​​数据对其进行setState。通过它，您可以在整个班级访问它。

this.state = 
  items: []
;


componentDidMount() 
fetch("https://url.url.com")
  .then(res => res.json())
  .then(
    (result) => 
      this.setState(
        items: result.items
      );
    ,
    // Note: it's important to handle errors here
    // instead of a catch() block so that we don't swallow
    // exceptions from actual bugs in components.
    (error) => 
      this.setState(
        isLoaded: true,
        error
      );
    
  )


return (
    <ul>
      items.map(item => (
        <li key=item.name>
          item.name item.price
        </li>
      ))
    </ul>
  );