我的useEffect中有一个异步请求。我注意到该组件是在useEffect完成之前呈现的。
import React, { useEffect } from 'react';
import axios from 'axios';
import './SearchWords.css';
const URL_REQUEST = 'http://myLink.com';
const SearchWords = (props) => {
const { setState } = props;
useEffect(async () => {
const data = {
sentence: props.sentence
};
await axios.post(`${URL_REQUEST}/getData`, { data })
.then((res) => {
setState(state =>({
...state,
search: res.data
}));
})
.catch((err) =>{
console.log(err);
})
}, []);
const render = () => {
if(props.search.length > 0) {
const linkMarkup = props.search.map((link) => (
<li key={link.id} className="link-list-item">
<a
href={link.link}
target="_blank"
rel="noopener noreferrer"
className="link-list-item-url"
onClick
>
{link.name}
</a>
</li>
));
return <ul className="link-list">{linkMarkup}</ul>;
} else {
return <p>No data found for: {props.sentence}</p>
}
}
return render()
}
export default SearchWords;
它正在工作，但首先显示No data found for: My Search String。然后，它重新加载并显示<ul>结果。如何避免首先显示“未找到数据”消息。
谢谢
最简单的调整是根据响应是否返回来有条件地呈现JSX的该部分：
const [hasLoaded, setHasLoaded] = useState();
// ...
.then((res) => {
setState(state =>({
...state,
search: res.data
}));
setHasLoaded(true);
})
然后改变
return <p>No data found for: {props.sentence}</p>
到
return hasLoaded ? <p>No data found for: {props.sentence}</p> : <p>Loading...</p>;
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句