在反应中触发子API调用父API

Question

在我的父(Feed)中，我显示了一个帖子列表:

function Feed() {
const [posts, setPosts] = useState(null);
useEffect(() => {
const fetchPosts = async () => {
try {
const result = await axios({
...
});

setPosts(result.data);
...
} catch (e) {
...
}
};
fetchPosts();
}, []);
return (
...
{posts &&
<div>
<PostCompose />                              // post creation
{posts.map((item, index) =>                  // map existing posts
<Post key={item._id} {...item} />)}      
</div>
}
...
)
}

子类(PostCompose)可以创建一个post:

function PostCompose() {
const [text, setText] = useState('');
const createPost = async () => {
try {
const result = await axios({
...
})
...
} catch (e) {
...
}
}
const handleTextChange = (e) => {
setText(e.target.value);
}
return (
...
<textarea onChange={handleTextChange} />
<button onClick={createPost}>Post</button>
...
)
}

PostCompose组件向后端发出创建新帖子的请求，但是如何触发Feed刷新以拉出新的帖子列表呢?

我觉得我的方法可能需要一些工作，任何帮助都会很棒，因为我是React的新手。谢谢。

Answer 1

一种方法是将fetchPosts函数从效果回调中取出，使用useCallback钩子来记忆它。现在，当Feed组件挂载并将提供给PostCompose组件时，您可以调用fetchPosts，就像我在这里对afterPostCreated道具所做的那样:

function Feed() {
const [posts, setPosts] = useState(null);
const fetchPosts = useCallback(async () => {
try {
const result = await axios({
// ...
});
setPosts(result.data);
// ...
} catch (e) {
// ...
}
}, []);
useEffect(() => {
fetchPosts();
}, [fetchPosts]);
return (
posts && (
<div>
<PostCompose afterPostCreated={fetchPosts} /> // post creation
{posts.map(
(
item,
index // map existing posts
) => (
<Post key={item._id} {...item} />
)
)}
</div>
)
);
}

然后在成功创建后，简单地在PostCompose组件中调用该回调:

function PostCompose({ afterPostCreated }) {
const [text, setText] = useState('');
const createPost = async () => {
try {
const result = await axios({
// ...
});
// ...
if (afterPostCreated) {
afterPostCreated();
}
} catch (e) {
// ...
}
};
const handleTextChange = (e) => {
setText(e.target.value);
};
return (
<>
<textarea onChange={handleTextChange} />
<button onClick={createPost}>Post</button>
</>
);
}