使用Redux时如何声明ReactJS默认道具？

Question

什么是在反应中声明默认道具的正确方法，以便当我在使用redux异步分配的道具上调用map时，我没有得到未定义的错误？现在，使用以下语法时，我在尝试分配trans_filter时收到错误，因为在初始调用渲染时数据未定义。

class ContainerComponent extends React.Component {
  static defaultProps = {
    searchProps: {
      data: []
    }
  };

  constructor(props) {
    super(props);
  }

  render(){
    let trans_filter = JSON.parse(JSON.stringify(this.props.searchProps.data));
  }
}

const mapStateToProps = (state) => ({
  searchProps: state.searchProps
});

export default connect(mapStateToProps, {getTransactionsAll})(ContainerComponent);

Answer 1

以下是使用ES6类语法创建ReactJS组件时如何声明默认道具：

class ContainerComponent extends React.Component {
  constructor(props) {
    super(props);
  }

  render(){
    let trans_filter = JSON.parse(JSON.stringify(this.props.searchProps.data));
  }
}

ContainerComponent.defaultProps = {
  searchProps: {
    data: []
  }
};

export default ContainerComponent;

此外，还有另一种声明defaultProps的语法。 这是一个快捷方式，但只有在您的版本启用了ES7属性初始值设定项时才会有效。我认为这不是为什么它不适合你，因为我发现你的语法没有问题：

class ContainerComponent extends React.Component {
  static defaultProps = {
    searchProps: {
      data: []
    }
  };

  constructor(props) {
    super(props);
  }

  render() {
    let trans_filter = JSON.parse(JSON.stringify(this.props.searchProps.data));
  }
}

export default ContainerComponent;

编辑：在您分享了mapStateToProps后，是的，它与Redux有关！

问题是由您reducer引起的。您必须声明initial state shape，此外，您必须在每个reducer中指定初始状态。 Redux将首次调用我们的减速器为undefined状态。这是我们返回应用程序初始状态的机会。

设置初始状态：

const searchPropsInitialState = {
  data: []
};

然后，当您操纵searchProps时，在您的reducer中执行：

function yourReducer(state = searchPropsInitialState, action) {
  // ... switch or whatever

  return state;
}

有关详细信息，请参阅handling actions in the Redux docs。