使用axios响应来响应JSX渲染

Question

我需要问这个问题，因为试图在几个小时内解决该问题。 现在，我创建了一个简单的布局，它具有一个侧边栏。 此块中有一个导航。 我正在尝试获取硬币列表并将其迭代到list元素中。

sidebar.jsx

export default {

    Sidebar() {
        return (
            <div>
                <h3>Coins</h3>
                {
                    axios({
                        method: "GET",
                        url: "./ticker.json",
                    }).then(function (resp) {

                        let list = resp.data;
                        return Object.keys(list).map((key) => {
                            console.log(list[key].name);
                            return (<li key={key}>{list[key].name}</li>)
                        });

                    }).catch(function (errors) {

                        alert("Error thrown");
                    })
                }
            </div>
        )
}

我将sidebar.jsx导入App.js ，您可以在下面看到整个App.js

import Landing from './views/landing';
import Header from './components/header';
import Sidebar from './components/sidebar';

function App() {
    return (
        <div className="container-fluid">
            {Header()}
            <div className="row">
                <div className="col-md-2">
                    {Sidebar.Sidebar()}
                </div>
                <div className="col-md-10">
                    {Landing(logo)}
                </div>
            </div>

        </div>
    );
}

export default App;

我遇到错误了。 我不明白该如何解决。

Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

我知道axios返回Promise但我不知道该如何处理。 如果有人可以帮助我，我将不胜感激。

Answer 1

功能组件内部的命令性代码必须放入useEffect或类似的自定义挂钩中。 您可以将response存储在state变量中。 并且仅在解析data后才渲染。

const App = () =>{
    const [data, setData] = useState(null)

    useEffect(() =>{
        axios.get(url)
            .then(res => setData(res.data))
    },[])


    return(
        <div>
           {
            data &&  Object.keys(data).map((key) => {
               console.log(list[key].name);
               return (<li key={key}>{list[key].name}</li>)
            })
            }
        </div>
    )
}