React 在 useEffect 完成之前挂钩渲染组件

Question

我的 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>结果。如何避免首先显示“未找到数据”消息。

谢谢

Answer 1

最简单的调整是根据响应是否返回来有条件地渲染 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>;