如何在useEffect函数中使用Redux状态

Question

我的基本目标是根据redux搜索状态发送一个api调用。我发现了一些类似的问题，但它们似乎都过于复杂，我无法理解它们的例子。我知道props.search在调用时没有被填充；如何让React等待它？我希望对以下代码为什么不起作用的解释和解决方案能帮助我理解我缺少了什么。

redux state = {
search: 'bar',
posts: []
}

componentnet.js

function Fu(props) {
useEffect(() => {
fetchPosts(props.search)
}, []);
const {posts} = props;
return (
<div>
posts ? ( posts.map((post) => (
<Post post={post} key={post._id} />
)) ) : (<p>loading...</p>
);
</div>
);
};
const mapStateToProps = (state) => ({
search: state.search,
posts: state.posts
});
const mapDispatchToProps = {
fetchPosts,
}; 
export default connect(mapStateToProps, mapDispatchToProps)(fu);

action.js

export const fetchPosts = (query) => (dispatch) => {
console.log(query);
}

log=undefined

Answer 1

useEffect(() => {
if(!props.search)return;
fetchPosts(props.search)
}, [props.search]);

Answer 2

这将不起作用的原因是假设第一张图片是默认的redux状态，当您将状态映射到道具时，组件道具中的posts将是一个空数组，posts将为true，这将使其运行并渲染Post组件。由于posts是一个空数组，并且您正在访问map函数中的_id，这将生成一个错误，表示无法访问未定义的_id。