Question

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

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

componenet.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

之所以不起作用，是因为假设第一张图片是您的默认redux状态，当您将状态映射到prop时，组件prop中的post将是一个空数组，而posts将为true，这将使它继续运行并渲染Post组件。由于posts是一个空数组，并且您正在访问map函数中的_id，这将生成一个错误，指出无法访问un_defined的_id。

Answer 2

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

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

2 个答案: