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

我正在尝试从react中的外部api获取配置文件数据。fetch可以工作，但它会同时带来所有数据。如果我调用用户名，代码会给出用户名列表，而不是一个用户名。如何通过此代码获取特定的获取请求？有没有办法动态生成呼叫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>
    ) 
  }
}

导出关于扩展React.Component的默认类{
建造师（道具）{
超级（道具）；
此.state={
项目：[]，
isLoaded:false，
}
}
componentDidMount（）{
取（'http://___.com/api/users/')
.then（res=>res.json（））
。然后（json=>{
这是我的国家({
isLoaded：是的，
项目：json，
})
})
}
render（）{
var{isLoaded，items}=this.state；
如果（！已加载）{
返回装载。。。；
}
其他的
数据已加载
返回(

{items.map（item=>(

名称：{item.username}

))};

) 
}
}

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

试试这段代码

componentDidMount(){
          

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

试试这个代码

componentDidMount(){
          

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

---

您可以在请求正文中传递参数，以便让服务器知道您正在确切地查找什么。 在您的情况下，您可以使用以下内容：

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

---

根据

，您可以在请求正文中传递参数，让服务器确切地知道您在寻找什么。 在您的情况下，您可以使用以下内容：

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

---

根据

这不起作用，错误是“GET/POST方法不能有正文”。这在api上可能不需要get/post，我猜您知道您的api接受的请求类型是什么吗？我编辑了代码，再试一次，然后告诉我结果。我在fetch选项中添加了POST方法。如果您的服务器接受GET请求，请将“POST”更改为“GET”代码。还是一样的错误。它要么给出了整个列表，要么什么都没有。我怀疑问题可能出在你的api上？您是否尝试从API中查询postman？问题不在于API。api工作正常，我检查过它不工作，错误是“GET/POST方法不能有主体”。这在api上可能不需要get/post，我猜您知道您的api接受的请求类型是什么吗？我编辑了代码，再试一次，然后告诉我结果。我在fetch选项中添加了POST方法。如果您的服务器接受GET请求，请将“POST”更改为“GET”代码。还是一样的错误。它要么给出了整个列表，要么什么都没有。我怀疑问题可能出在你的api上？您是否尝试从API中查询postman？问题不在于API。api很好用，我查过了没用。if循环在我认为不起作用的函数中被调用时出错。我认为if循环在函数中被调用时会出错