state值在react js中是未定义的

Question

我从后端获取数据并将其存储到状态(post)中。当我使用post.name时，它显示未定义

const [post, setPost] = useState([]);

const getAllUser = async () => {
const response = await fetch("http://localhost:4000/getpost");
response.json().then((res) => setPost(res.data.Post));
// console.log(post);
};


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

const component = post.component;  // value is undefine
console.log(component);

Answer 1

在传递中我使用了setState回调，所以现在你可能想使用:

https://maksimrv.medium.com/usestate-with-callback-d574298eb8bd

因为你想读一个状态变量的值后立即更新。

Answer 2

您需要在访问post.name之前验证post是否已填充。

如果你使用babel，你可以这样做:

post?.name

如果你没有使用babel:

post ? post.name : 'empty'

Answer 3

尝试处理所有异步逻辑在useEffect

useEffect(() => {
getAllUser();

async function getAllUser () {
const response = fetch("http://localhost:4000/getpost");
const json = await response.json()
setPost(json.data.Post);
// console.log(post);
};
}, []);

Answer 4

当你操纵状态时，你应该使用useEffect()，例如:

useEffect(() => { 
// Do something with the updated post object here.
}, [ post ]);