从 React JS 中的外部 api 获取特定数据

Question

我正在尝试从外部 api 获取配置文件数据。提取工作，但它一次带来所有数据。如果我调用用户名，代码会给出用户名列表而不是一个用户名。如何通过此代码获取特定的获取请求？有什么方法可以动态生成通话ID吗？

这是我尝试过的代码

export default class About extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      items:[],
      isLoaded: false,
    }
  }
    componentDidMount(){

      fetch('http://___.com/api/users/')
        .then(res => res.json())
        .then (json => {
                this.setState({
                  isLoaded: true,
                  items: json,
                })
        })
    }
  render() {
      var { isLoaded , items } = this.state;
      if (!isLoaded) {
        return <div>Loading...</div>;
      }
      else
          <div>
            Data has been loaded
          </div>

    return (
          <div>
            <ul>
              {items.map(item => (
                    <li key={item.id}>
                      Name: {item.username}
                    </li>
              ))};
            </ul>
          </div>
    ) 
  }
}

请注意，api 中的 json 数据具有“id”和“username”字段，并且 fetch 用于一次获取所有数据。

Answer 1

试试这个代码

componentDidMount(){
          

  fetch('http://___.com/api/users/')
    .then(res => 
      if (res.ok) {
            this.setState({
              isLoaded: true,
              items: res.json(),
            })
   })
}

Answer 2

您可以在请求正文中传递参数，让服务器知道您正在寻找什么。 在你的情况下，你可以使用这样的东西：

      fetch('http://___.com/api/users/',{
                method: 'POST',
                body: JSON.stringify({
                id: 'userId'
                })})
  

根据react official docs