state未使用React钩子进行更新

Question

这是一个当组件安装在DOM 上时必须调用的函数

const [dashboardData, setDashboardData] = useState('');
const loadDashboardData = () => {
console.log("Loading Dashboard Data ", campaign);
Utils.request({
url: `campaign/user/info`
}).then(
res => {
console.log("dashboard data" , res.data)
setDashboardData(res.data);
},
err => console.log(err)
)
}
useEffect(() => {
loadDashboardData();
console.log("campaigndata",dashboardData);
}, []);

当我在useEffect中控制台dashboardData时，它只显示一个字符串，即campaigndata，我将其作为console.log中的第一个参数传递。我认为我的仪表板状态变量没有得到更新

Answer 1

回答

只为dashboardData编写另一个useEffect。

useEffect(() => {
console.log("campaigndata",dashboardData);
}, [dashboardData]);

解释

您的useEffect将一个空数组作为第二个参数，这使得它只运行第一次(作为DidMount(，因此它不会在更改状态后重新渲染组件时重新运行，这就是为什么它将空字符串显示为初始状态
为变量dashboardData写入另一个useEffect的次数将与dashboardData的更改次数一样多。

Answer 2

您可以将"dashboard"作为依赖项传递给现有的useEffect。现有的useEffect将同时用作componentDidMount和componentDidUpdate。

所以不需要写另一个useEffect。

useEffect(() => {
loadDashboardData();
console.log("campaigndata",dashboardData);
}, [dashboardData]);