Question

我正在videos=["x.mp4","y.mp4","z.mp4","x_480.mp4"] #Loops through all the videos for video in videos: if "_480.mp4" in video: #Removes the "_480" part of the video title start = video.replace("_480", "") for video2 in videos: if video2 == start: videos.remove(start) print(videos)中开发一个互联网论坛应用程序，并且在呈现特定论坛的帖子时遇到了一个问题。应用程序从reactjs + redux中的存储中获取数据后，我需要调用函数loadPosts。

我尝试使用componentDidMount，但是它引发了错误this.props.fetchForums().then(loadPosts())。在搜索Internet时，我偶然发现许多人通过在组件本身中具有访存功能来解决此问题，但是我试图做一个合适的后端，前端应用程序，因此我想找到一个不同的解决方案。

这是我的actionCreator中的fetchForums函数：

TypeError: Cannot read property 'then' of undefined

这是有问题的代码：

export const  fetchForums = () => dispatch => {
    fetch('http://localhost:7373/forum/all?page=0&size=2')
        .then(response => response.json())
        .then(forums => dispatch({
            type: 'FETCH_FORUMS',
            payload: forums.content
        }));

};

我已省略代码的某些部分以使其更具可读性，希望我没有遗漏任何重要内容。函数class RenderLilPosts extends Component { componentDidMount() { this.props.fetchForums(); //Here I would like to call loadPosts } loadPosts() { let list = this.state.posts; this.props.posts.map(post => { list.push(post); }); this.setState( { posts: list } ); } } RenderLilPosts.propTypes = { fetchForums: PropTypes.func.isRequired, forums: PropTypes.array.isRequired }; const mapStateToProps = state => ({ posts: state.forums.posts, forums: state.forums.storage }); const mapDispatchToProps = (dispatch) => ({ fetchForums: () => { dispatch(fetchForums()) } }); export default connect(mapStateToProps, mapDispatchToProps)(RenderLilPosts);绝对没有问题，因为只要使用按钮调用它就应该这样做。只是在获取数据之后我不知道如何称呼它。谢谢您的回答。

Answer 1

只需在您的还原操作中将return添加到fetch之前即可。它将返回一个承诺。没有那个undefined隐式地返回，这显然不是一个承诺。这就是为什么您获得Cannot read property 'then' of undefined的原因。

export const fetchForums = () => dispatch => {
  return fetch('http://localhost:7373/forum/all?page=0&size=2')
    .then(response => response.json())
    .then(forums =>
      dispatch({
        type: 'FETCH_FORUMS',
        payload: forums.content
      })
    );
};

或者您可以删除花括号。这样可以简化代码，而您不必编写return。

export const fetchForums = () => dispatch =>
  fetch('http://localhost:7373/forum/all?page=0&size=2')
    .then(response => response.json())
    .then(forums =>
      dispatch({
        type: 'FETCH_FORUMS',
        payload: forums.content
      })
    );

在如何使用链fetchForums和loadPosts时，您还有一个小问题。应该是：this.props.fetchForums().then(() => loadPosts())。如果您需要在首次调用时传递参数，这将很有用。或this.props.fetchForums().then(loadPosts)

还有一种使用async和await关键字的更现代的方法，但是您可能需要像babel这样的附加工具。

async componentDidMount() {
  await this.props.fetchForums();
  loadPosts()
}

请注意，如果您的第二个呼叫不取决于第一个呼叫的结果，则无需等待或链接带有承诺的呼叫。

也许您的loadPosts函数也应该和fetchForums一起作为redux动作。在这种情况下，使用状态作为帖子是不合理的，可能您可以传递带有道具的帖子并直接使用它们，而不是保存为状态。

在componentDidMount中获取数据后无法调用函数

1 个答案: