reactjs - Redux 和 render() 同步失败

Question

class CategoryFeed extends Component {
  componentDidMount() {
    const {
      params,
      getForum,
    } = this.props;
    getForum(params.fid);
  }

componentDidUpdate(prevProps) {
    const {
      currentForum,
    }
    alert(currentForum._id); // WORKS WELL
}
...
render() {
    const {
      currentForum,
    } = this.props;

alert(currentForum._id); // ERROR!
...
export default connect(
  (state) => { return {
    currentForum: state.app.currentForum,
...
(dispatch) => { return {
getForum: (forum, fid) => { 
      dispatch(getForum(forum, fid));   
    },
  }; }
)(CategoryFeed);

正如您在代码末尾看到的，我在商店中注册了“currentForum”。

在“componentDidMount()”中，我调用“getForum(params.fid)”，它在内部更新“currentForum”。

然后，我尝试通过调用“alert(currentForum._id);”来检查“currentForum”是否已更新 在 render() 函数中。

但是，这会导致 currentForum 未定义的错误。但是，“警报（currentForum._id）；” 在“componentDidUpdate（prevProps）”中工作正常。它确实会提醒正确的值。

如何在调用 render() 之前设置 currentForum 以在这种结构中的 render() 函数中工作？

Answer 1

您无法阻止render()被呼叫，但您可以通过以下方式进行安全检查currentForum：

render() {
  const { currentForum } = this.props;
  if (!currentForum) {

    return null;
  }

  return (
    <div>
      {currentForum}
    </div>
  );
}