Angularjs 反应/重排等待存储更新

我有一个问题，react组件在redux存储区有任何数据之前进行渲染

该问题是由React组件在现有angular应用程序将数据发送到存储区之前呈现到页面引起的。 我不能改变渲染的顺序或类似的事情

我的简单组件是

import React, {Component} from 'react';
import { connect } from 'react-redux';

import {addBot} from './actions';

class FlowsContainer extends React.Component {

  componentDidMount() {
      this.props.initStoreWithBot();
  }

  render() {
    // *** at this point I have the store in state prop
    //but editorFlow array is not yet instanced, it's undefined

    const tasks = this.props.state.editorFlow[0].flow.tasks
    return (
          <div>      
              Flow editor react component in main container          
          </div>
      );
  }

}

const mapStateToProps = (state) => ({
  state : state
})

const mapDispatchToProps = (dispatch) => {
    return {
        initStoreWithBot : () => dispatch(addBot("test 123"))
    };
};

export default  connect(
  mapStateToProps,
  mapDispatchToProps
)(FlowsContainer)

import React，{Component}来自'React'；
从'react redux'导入{connect}；
从“./actions”导入{addBot}；
类FlowsContainer.Component{
componentDidMount（）{
this.props.initStoreWithBot（）；
}
render（）{
//***此时，我的商店处于状态
//但editorFlow数组尚未实例化，它尚未定义
const tasks=this.props.state.editorFlow[0].flow.tasks
返回(
主容器中的流编辑器组件
);
}
}
常量mapStateToProps=（状态）=>({
州：州
})
const mapDispatchToProps=（调度）=>{
返回{
initStoreWithBot:（）=>调度（addBot（“test 123”））
};
};
导出默认连接(
MapStateTops，
mapDispatchToProps
)（流动集装箱）

那么，在editorFlow数组具有元素之前，如何延迟渲染？

您可以使用

从“/actions”导入{addBot}；
类FlowsContainer.Component{
componentDidMount（）{
this.props.initStoreWithBot（）；
}
render（）{
//***此时，我的商店处于状态
//但editorFlow数组尚未实例化，它尚未定义
const{editorFlow}=this.props.state；
让任务；
如果（editorFlow的类型==='object'&&editorFlow.length>0）{
tasks=editorFlow[0]。flow.tasks；
}
返回(
{任务&&
主容器中的流编辑器组件
}
);
}
}
常量mapStateToProps=（状态）=>({
州：州
})
const mapDispatchToProps=（调度）=>{
返回{
initStoreWithBot:（）=>调度（addBot（“test 123”））
};
};
导出默认连接(
MapStateTops，
mapDispatchToProps
)（流动集装箱）

据我所知，你不能

redux的工作方式是，它首先呈现所有内容，然后使用一些异步内容（例如加载数据）执行操作，然后填充存储，然后redux使用新状态（使用MapStateTops）更新组件

据我所知，生命周期是这样的：

使用创建存储时提供的初始状态树呈现组件

执行异步操作、加载数据、扩展/修改redux状态

Redux使用新状态更新组件

我不认为将整个redux状态映射到单个道具是一个好主意，组件应该真正从全局状态获取它需要的东西

在组件中添加一些正常的默认值可以确保在获取数据之前显示“加载”微调器。

对于Cssko（我已经添加了您的答案）（和dude）谢谢大家一个有效的解决方案是

import React, {Component} from 'react';
import { connect } from 'react-redux';

import {addBot} from './actions';

class FlowsContainer extends React.Component {

  componentDidMount() {
      this.props.initStoreWithBot();
  }

   render() {
    const { editorFlow } = this.props.state;
    let tasks;
    if (typeof editorFlow === 'object' && editorFlow.length > 0) {
        tasks = editorFlow[0].flow.tasks;
    }

    if(tasks){
        return (
          <div>      
              Flow editor react component in main container          
          </div>
        )
      }
      else{
          return null;
      }
  }
}

const mapStateToProps = (state) => ({
  state : state
})

const mapDispatchToProps = (dispatch) => {
    return {
        initStoreWithBot : () => dispatch(addBot("test 123"))
    };
};

export default  connect(
  mapStateToProps,
  mapDispatchToProps
)(FlowsContainer)

import React，{Component}来自'React'；
从'react redux'导入{connect}；
从“./actions”导入{addBot}；
类FlowsContainer.Component{
componentDidMount（）{
this.props.initStoreWithBot（）；
}
render（）{
const{editorFlow}=this.props.state；
让任务；
如果（editorFlow的类型==='object'&&editorFlow.length>0）{
tasks=editorFlow[0]。flow.tasks；
}
如果（任务）{
返回(
主容器中的流编辑器组件
)
}
否则{
返回null；
}
}
}
常量mapStateToProps=（状态）=>({
州：州
})
const mapDispatchToProps=（调度）=>{
返回{
initStoreWithBot:（）=>调度（addBot（“test 123”））
};
};
导出默认连接(
MapStateTops，
mapDispatchToProps
)（流动集装箱）

为什么不呢？如果未定义editorFlow，它将不会呈现任何内容。TypeError:无法读取FlowsContainer.render（container.js:17）中未定义的属性“flow”@cssko是正确的，您的组件将呈现两次：一次是在装入组件时（存储区仍然为空），另一次是在存储区状态更改时。如果您有有效的数据，并且只有在数据有效时才进行渲染，则可以返回

null

以不渲染任何内容。那么editorFlow是否为空数组？这就解释了为什么三元计算结果是这样的。我在大约20分钟前更新了我的答案，现在它应该可以按预期工作了。为什么这个问题被否决了？

import React, {Component} from 'react';
import { connect } from 'react-redux';

import {addBot} from './actions';

class FlowsContainer extends React.Component {

  componentDidMount() {
      this.props.initStoreWithBot();
  }

   render() {
    const { editorFlow } = this.props.state;
    let tasks;
    if (typeof editorFlow === 'object' && editorFlow.length > 0) {
        tasks = editorFlow[0].flow.tasks;
    }

    if(tasks){
        return (
          <div>      
              Flow editor react component in main container          
          </div>
        )
      }
      else{
          return null;
      }
  }
}

const mapStateToProps = (state) => ({
  state : state
})

const mapDispatchToProps = (dispatch) => {
    return {
        initStoreWithBot : () => dispatch(addBot("test 123"))
    };
};

export default  connect(
  mapStateToProps,
  mapDispatchToProps
)(FlowsContainer)