为什么非条件 JSX 在从另一个变量设置状态值后不起作用

Question

这是我在api调用后设置值和更新的代码

function Expense() {
const [details, setDetails] = useState({});
const [login, setLogin] = useState(false);
const [expyear, setExpyear] = useState();

useEffect(() => {
try {
(//Api call...)
.then((res) => {
const details = res.data[0];
// Also when I do setDetails(res.data[0]) the non-conditional render works fine but I want to set some value immediately after the Api call
setDetails(details);
setLogin(true);
setExpyear(details.year);
});
}
} catch (err) {
console.log(err);
}
}, []);

但是当我尝试呈现以下JSX时，当我在LastData中记录道具{details}时，它会给出TypeError: Cannot read properties of undefined (reading 'Fullname')错误，它显示空对象

return (
<div>
<div>
<LastData details={details} />
{details.Fullname}
{expyear}
</div>
</div>
);
}

直到我把它改为条件渲染，它工作得很好

return login ? (
<div>
<div>
<LastData details={details} />
{details.Fullname}
{expyear}
</div>
</div>
) : (
<div>Hello</div>
);
}

我需要知道为什么我必须把一个条件来渲染JSX，为什么它在设置直接api值到状态后无条件渲染?

Answer 1

这是因为setState是异步操作，details状态的初始值是空对象(这导致details.Fullname === undefined在初始渲染时)。只有当这组状态设置完成时:

setDetails(details);
setLogin(true);
setExpyear(details.year);

和login设置为true，您可以看到所有其他数据呈现

你也可以添加初始状态到details，而不是空对象，为使用的字段设置一些数据，例如useState({FullName: ""})。在第一次渲染你将有一个空字符串，当状态更新，你会得到你的FullName值。