使用 Axios 从 Reactjs 中的 Api 获取数据答案

【问题标题】：Fetching data from Api in Reactjs using Axios使用 Axios 从 Reactjs 中的 Api 获取数据
【发布时间】：2021-02-07 09:00:50
【问题描述】：

我正在尝试从此 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

但是什么都没有出现，控制台给出了这个错误：警告：列表中的每个孩子都应该有一个唯一的“key”属性。

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

【问题讨论】：

标签： reactjs api

【解决方案1】：

当你映射一个数组时，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;

【讨论】：

【解决方案2】：

Json结果使用错误，`

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

【讨论】：