Axios已提取数据时如何管理数据

kkih6yb8 于 2023-01-09 发布在 iOS

关注(0)|答案(1)|浏览(124)

我使用MySQL的数据库，用Axios和useEffect获取数据，然后用一个prop将数据库数据传递给一个组件，如下所示：

const Component = () => {
 //DB
  const urlProxy = "/api/cities";

  //Hooks
  const [data, setData] = useState([]);

  //DB Fetch
  const fetchData = async () => {
    await axios
      .get(urlProxy)
      .then((res) => {
        setData(res.data);
      })
      .catch((err) => {
        console.log(err);
      });
  };

  useEffect(() => {
    return () => {
      fetchData();
    };
  }, []);

return (
    <>
      <h1>Cities</h1>
      <Cities api={data} />
    </>
  );
};

在Cities组件内部，我想创建一个算法来操作这些数据，但我得到了一个空数组（来自const [data，setData] = useState（[]）。过了一会儿，我从数据库中获得了获取的数据。

const Cities = (api) => {

console.log(data) // First Print: [{api:Array(0)}] then [{api:Array(2)}]

return(
<>
  ...
</>
)

}

所以如果它一开始输出一个空数组我会得到一个错误
我想使用useTimeout（），但我不知道是否有更好的解决方案，以便在获取数据后使用数据。

axios

来源：https://stackoverflow.com/questions/75011295/how-manage-data-when-its-already-fetched-by-axios

1条答案

按热度按时间

olhwl3o21#

您所需要做的就是在将数据设置为您的状态之前对其进行操作
而等待的最好方法是设置一个loading状态，等待数据被拉取，然后让useEffect对其进行操作。
像这样的东西应该对你有用

const urlProxy = "/api/cities";
const Component = () => {
  const [data, setData] = useState();
  const [loading, setLoading] = useState(true);

  //DB Fetch
  const fetchData = async () => {
    await axios
      .get(urlProxy)
      .then((res) => {
        // Manipulate your data here before you set it into state
        const manipluatedData = manipulateData(res.data)
        setData(manipluatedData);
      })
      .catch((err) => {
        console.log(err);
      })
      .finally(() => 
        setLoading(false);
      })
  };

  useEffect(() => {
    return () => {
      fetchData();
    };
  }, []);

if(loading){
   return 'loading....'
}

return (
    <>
      <h1>Cities</h1>
      <Cities api={data} />
    </>
  );
};

赞(0）回复(0）举报 2023-01-09

我来回答

Axios已提取数据时如何管理数据

1条答案

相关问题

热门标签

最新问答