反应，延迟渲染和钩子
反应，延迟渲染和钩子
提问于 2020-03-13 05:59:54
我正在学习反应，我有奇怪的情况，理论上很简单，但我不知道如何解决。首先，我使用props.children，当我得到响应时，我想呈现代码的某些部分。我以一种奇怪的方式解决了它，但我仍然有错误。所以看一看：
function AddCards(axiosResponse) {
const [cardsCode, setCardsCode] = React.useState(null);
const handleGetCards = (newCode) => {
setCardsCode(newCode);
};
var firstText = null;
var cards = axiosResponse;
if (cards[0]) {
firstText = [];
firstText.push( <div>
<h1>{cards[0].title}</h1>
<p>{cards[0].text}</p></div>
);
handleGetCards(firstText);
}
return (
<ButtonAppBar>
{cardsCode}
</ButtonAppBar>
);
}
function makeRequest() {
axiosCall(AddCards);
}
makeRequest();
ReactDOM.render(<AddCards />, document.querySelector('#root'));我想做的是从axiosCall()获得响应，它返回一个dicts数组，并在AddCards函数中使用它。我犯了很多错误，为了避免它，我使用了函数makeRequest，它调用axiosCall，调用AddCards作为回调(也许有人知道更好的解决方案，因为我认为这个解决方案很糟糕)。但是好的，现在我正在尝试使它工作，我创建了状态，所以在它改变时，react应该重新呈现，默认情况下我使它为null。if (cards[0])检查响应是否出现，并且它应该改变状态。但是我有一个错误Unhandled Rejection (Error): Invalid hook call。我该怎么办才能解决这个问题？
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-03-13 06:09:39
要么将请求响应作为prop传递给组件：
function AddCards(props) {
const response = props.response;
// do stuff with data here
}
function makeRequest() {
// some further logic here
axiosCall();
}
makeRequest().then((response) => {
ReactDOM.render(<AddCards response={response}/>, document.querySelector('#root'));
});或者使用useEffect钩子：
import React, { useEffect } from 'react';
function AddCards() {
const [cardsCode, setCardsCode] = React.useState(null);
useEffect(() => {
makeRequest().then((response) => {
// extract data from response based on your need
setCardsCode(response);
});
}, []);
// access cardsCode in your function
}
makeRequest().then((response) => {
ReactDOM.render(<AddCards/>, document.querySelector('#root'));
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60671819
复制相关文章
![T-SQL Enhancement in SQL Server 2005[下篇]](https://ask.qcloudimg.com/http-save/yehe-1161266/28k835r0qk.jpeg)
![T-SQL Enhancement in SQL Server 2005[上篇]](https://ask.qcloudimg.com/http-save/yehe-1161266/u921daire6.jpeg)
相似问题
SQL Server (2005)查询帮助
SQL Server 2005查询帮助
TSql (sql Server2005)查询运行缓慢
帮助Delphi和Sql Server 2005
SQL Server 2005透视查询帮助
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
