Question

我刚刚开始学习React，并努力创建一个调用API的组件，然后将返回的数据显示在页面上。

我正在使用状态，并且在调用我的API后试图更新状态，然后将更新JSX代码，以便将返回的API数据显示在浏览器中。

这是我组件的代码

import { useParams } from "react-router";

const axios = require('axios');
const DEALS_API_URL = "";

const Deal = () => {
    let { deal_id } = useParams();
    const [deal, setDeal] = useState({});

    async function getDeal() {
        await axios.get(DEALS_API_URL + deal_id, {})
            .then(res => {
                setDeal(res.data);
            });
    }

    useEffect(() => {
        getDeal();
    }, []);

    return (
        <div>
            <p>{deal.title}</p>
        </div>
    );
}

export default Deal;

当前页面已加载且交易标题未显示，如何加载页面，然后在调用我的API后更新状态时，在浏览器上显示交易标题

Answer 1

由于我们是从API调用的，因此数据在首次渲染时可能不可用。因此，我们必须检查其可用时间。

{deal ? (
  <p>{deal.title}</p>
) : <h1>Loading</h1>}

React useEffect更新状态，但JSX代码未更新

1 个答案: