Question

我遇到的问题是，在redux商店有任何数据之前，反应组件正在呈现。

问题是由现有的角度应用程序将数据分派到商店之前呈现给页面的React组件引起的。我不能改变渲染的顺序或类似的东西。

我的简单React组件是

#include <stdio.h>
#include <stdlib.h>
#include <string.h>

char *convertToInrFormat(const char *s) {
    const char *src = s + strspn(s, " \t\r\n");  /* skip spaces */
    int len = strspn(src, "0123456789");   /* count number of digits */
    int destlen = len + (len > 3 ? len / 2 - 1 : len == 0);
    char *dest = malloc(destlen + 1);
    if (dest != NULL) {
        int i = 0, j = 0;
        while (i < len) {
            dest[j++] = src[i++];
            if (i + 2 < len && ((i ^ len) & 1))
                dest[j++] = ',';
        }
        if (len == 0) {
            dest[j++] = '0';
        }
        dest[j] = '\0';
    }
    return dest;
}

int main(int argc, char *argv[]) {
    for (int i = 1; i < argc; i++) {
        char *input = argv[i];
        char *output = convertToInrFormat(input);
        printf("%s -> %s\n", input, output);
        free(output);
    }
    return 0;
}

那么在editorFlow数组有元素之前，我怎么能延迟渲染呢？

Answer 1

您可以使用Conditional Rendering。

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 { editorFlow } = this.props.state;
    let tasks;
    if (typeof editorFlow === 'object' && editorFlow.length > 0) {
        tasks = editorFlow[0].flow.tasks;
    }
    return (
      {tasks && 
          <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)

Answer 2

回应Cssko（我已经提升了你的答案）（和thedude）谢谢你们一个有效的解决方案

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)

React / Redux等待商店更新

2 个答案: