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”字段，并且提取功能可一次带走所有数据。

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

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

2 个答案: