时间戳

首页 > 解决方案 > 函数执行后需要渲染 React js

javascript - 函数执行后需要渲染 React js

问题描述

我正在尝试从 API 网关获取一些数据并使用它来呈现一棵树，但我无法这样做。这是我正在尝试的

var structure = [

];

export default function App() {
  
  React.useEffect(() => {
    
    async function fetchData() {
      const res = await axios.get(`Some API_GATEWAY Request`)
      structure.push(JSON.parse(res['data']))
      console.log(structure[0])
    }
    
    fetchData();
    console.log(structure[0])
  }, []);

  return (
    <div className="App">
      {console.log(structure[0])}
      <Tree data={structure} />
    </div>
  );
}

这里的输出是

undefined //from 3rd console.log
undefined //from 2nd console.log
some value //from 1st console.log

如何获取返回中的值以便我可以使用结构

标签： javascriptnode.jsreactjsasynchronousasync-await

解决方案

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

const App = () => {
  const [catties, setCatties] = useState([]);
  const [loading, setLoading] = useState(false);

  const fetchCats = async () => {
    setLoading(true);
    const res = await axios.get("https://api.thecatapi.com/v1/images/search");
    setLoading(false);
    setCatties([...catties, ...res.data]);
  };

  useEffect(() => {
    fetchCats();
  }, []);

  if (loading) {
    return <h1> ...loading</h1>;
  }

  return (
    <div>
      {catties.map(el => (
        <img src={el.url} alt="Catty" key={el.id} />
      ))}
    </div>
  );
};

export default App;

在codesandbox中运行这段代码，你会看到它是如何工作的。这是一种标准的清洁方式。通常你希望将这些函数保留在 redux 或 context 中。请让我知道这是否对您有用。

推荐阅读