我需要问这个问题,因为试图在几个小时内解决该问题。现在,我创建了一个简单的布局,它具有一个侧边栏。此块中有一个导航。我正在尝试获取硬币列表并将其迭代到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
,但是我不知道如何处理。
如果有人可以帮助我,我将不胜感激。
答案 0 :(得分:3)
功能组件内部的命令性代码必须放入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>
)
}