使用Axios在Reactjs中从Api获取数据

如何解决使用Axios在Reactjs中从Api获取数据

我正在尝试从此API https://randomuser.me/api/?results=25获取数据 用此代码

function Users() {
 const [Users,setUsers] = useState([])
    useEffect(() => {
        axios.get('https://randomuser.me/api/?results=25')
        .then(Response=>{
            if(Response.data){
                alert("FOund")
                setUsers([Response.data])
                

            }else{
                alert("not found")
            }
        })
    },[])
    const displaylist = Users.map((User,index)=>{
        return(
        <h3>{User.gender}</h3>
        )
    })
    
    return (
        <div>
            {displaylist}
        </div>
    )
}

export default Users

但是没有任何显示，控制台显示此错误： 警告：列表中的每个孩子都应该有一个唯一的“关键”道具。

检查Users的渲染方法。有关更多信息，请参见https://reactjs.org/link/warning-keys。 在h3 在用户处（http：// localhost：3000 / static / js / main.chunk.js：627：83） 在div 在应用程序中

解决方法

当您通过数组映射时，React需要一个唯一的键，例如User.id;在这种情况下，您也可以使用索引。我对您的功能做了如下更改：

function Users() {
  const [Users,setUsers] = useState([]);
  useEffect(() => {
    axios.get("https://randomuser.me/api/?results=25").then((Response) => {
      if (Response.data) {
        alert("FOund");
        setUsers(Response.data.results);
      } else {
        alert("not found");
      }
    }).catch(error => console.log(error));
  },[]);
  const displaylist = Users.map((User,index) => {
    return <h3 key={index}>{User.gender}</h3>;
  });

  return <div>{displaylist}</div>;
}

export default Users;

,

Json结果的使用是错误的，`

  if (Response.result) {
    alert("FOund");
    setUsers(Response.result);
  } else {
    alert("not found");
  }`