使用反应钩子显示来自 jsonplaceholder api 的数据答案

【问题标题】：Display data from jsonplaceholder api using react hooks使用反应钩子显示来自 jsonplaceholder api 的数据
【发布时间】：2020-01-13 22:21:00
【问题描述】：

我有简单的 rest api，我正在尝试从 jsonplaceholder fake api 显示用户

这是我的函数组件

import React, {useState, useEffect} from "react";
import axios from 'axios';

 export default function TableList() {

  const [data, setData] = useState({ hits: [] });

    useEffect(() => {
      const fetchData = async () => {
        const result = await axios(
          'https://jsonplaceholder.typicode.com/users',
        );
        setData(result.data);
          console.log(result.data);
      };
      fetchData();
    }, []);


  return (
    <div>
      <ul>
            {data.hits.map(item => (
              <li key={item.id}>
              <h1>{item.name}</h1>
              </li>
            ))}
          </ul>

    </div>

  );
}

不幸的是，我收到以下错误：

TableList.js:22 Uncaught TypeError: Cannot read property 'map' of undefined

我的代码有什么问题？

【问题讨论】：

标签： javascript reactjs react-hooks

【解决方案1】：

您设置的数据不正确，您应该对data.hits 进行空检查。这是一个工作示例

function TableList() {
  const [users, setUsers] = useState({ hits: [] });

  useEffect(() => {
    const fetchData = async () => {
      const { data } = await axios(
        "https://jsonplaceholder.typicode.com/users"
      );
      setUsers({ hits: data });
    };
    fetchData();
  }, [setUsers]);

  return (
    <div>
      <ul>
        {users.hits &&
          users.hits.map(item => (
            <li key={item.id}>
              <span>{item.name}</span>
            </li>
          ))}
      </ul>
    </div>
  );
}

https://codesandbox.io/s/affectionate-lehmann-17qhw

【讨论】：

您能解释一下使用 prevSatate 背后的原因吗？
对不起，习惯的力量！你不需要prevState。我更新了代码框
{users && users.hits && 你为什么用这个而不是我试过的你能解释一下吗？
这只是一个“空检查”。您可能不需要它，但通常最好在尝试映射之前确保数组中有某些内容。

【解决方案2】：

“命中”是必要的吗？

import React, { useState, useEffect } from 'react';
import axios from 'axios';

export default function MiJSON(){
   const [users, setUsers] = useState([]);
   const urlJson= 'https://jsonplaceholder.typicode.com/users';

    useEffect(()=>{
        const fetchData = async ()=>{
            const users_data = await axios(urlJson);
            setUsers(users_data);
        };
        fetchData();
     },[setUsers])

   console.log(users)

return (
<div>
    <h1>USERS</h1>
  <ul>      
    {(users.length !== 0)
        ?
      users.data.map(item => (
        <li key={item.id}>
          <span>{item.name}</span>
        </li>
      ))
      
      : <h1>Sorry info not found</h1>
    }
  </ul>
</div>
)
}

【讨论】：