Question

const component = () => {
        const [data, setData] = useState(null);
        const fetchData = async () => {
                try {
                        new DataService().getData().then((response) => {
                                setData(response);
                                console.log(data);
                                console.log(response);
                        }
                } catch (error) {
                        console.log(error);
                }
        }

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

即使console.log（response）显示正确的数据，为什么console.log（data）也显示为空？数据状态应该在我进行console.log记录之前设置好，不是吗？

Answer 1

应该在我进行控制台登录之前设置数据状态，不是吗？

否。

Answer 2

这很可能是因为 setData 是异步的。由于您在使用 setData 后立即要求输入 data 的值，因此该值很可能尚未更新。

如果您是Chrome用户，是否使用过React Developer Tools？这将使您无需依赖console.log即可检查组件的状态。

设置状态功能未正确更新状态

2 个答案: