react 组件如何在没有 mapStateToProps 的情况下获取数据答案

【问题标题】：How does react component get data without mapStateToPropsreact 组件如何在没有 mapStateToProps 的情况下获取数据
【发布时间】：2020-07-23 14:30:08
【问题描述】：

我是一个 Redux 新手，当我看到下面的代码时，我被空的 mapStateToProps 函数弄糊涂了：

const mapStateToProps = state => {
  return {};
}

据我了解，上面的函数什么也没做，所以 Redux 不会给组件任何数据。但实际上该组件确实获得了数据。我很困惑，整个代码如下：

const mapStateToProps = state => {
  return {};
};
const mapDispatchToProps = dispatch => {
  return {
    updateConfigs: (id, updConfigs) => {
      dispatch(updateActionConfig(id, updConfigs));
    }
  };
};

class TestConfigContainer extends React.Component {
  constructor(props) {
    super(props);
    const { configs } = props;
    let stateConfigs = Object.assign({}, configs);
    this.state = {
      configs: stateConfigs,
    };
  }

  componentDidUpdate(prevProps) {
    const configs = Object.assign({}, this.props.configs);
    const prevConfigs = Object.assign({}, prevProps.configs);
    if (!_.isEqual(configs, prevConfigs)) {
      let stateConfigs = Object.assign({}, configs);
      this.setState({
        configs: stateConfigs,
      });
    }
  }
   
  render() {
    const { configs: stateConfigs } = this.state;
    const { configs: propsConfigs } = this.props;
    let configs = getConfigs(stateConfigs);
    return (<DetectionConfig configs={configs} onSubmit={this.handleSubmit} />);
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(TestConfigContainer));

请问这行是什么意思：const { configs: stateConfigs } = this.state，我从未见过这种语法。

【问题讨论】：

标签： reactjs redux

【解决方案1】：

你得到的是组件状态而不是 redux 状态。和

const { configs: stateConfigs } = this.state

stateConfigs 是configs 的别名。所以，现在你可以使用stateConfigs 代替configs。

您可以查看我的another post，在那里您可以找到一些链接以了解更多详细信息。

【讨论】：

我还是不明白。该组件是一个子组件，所有来自调用它的外部组件的数据。所以组件应该从 this.props 而不是 this.state 中获取数据。 this.state 中没有任何内容。特别是当外部组件通过 componentDidUpdate 向它发送数据时。
您正在使用super(props) 进行构建，并且在该状态下使用了道具，并且您得到了。
你能告诉我你所期待的究竟是哪一个会进入 redux 状态吗？这样我就可以进一步解释清楚。

【解决方案2】：

请检查该组件的父组件，即呈现TestConfigContainer 的位置。你也可以将 props 从 parent 传递给 child，因为 Redux 似乎没有传递任何东西，所以你最初的想法是对的。

在父母的渲染中，我确定你有类似的东西

render () {
  return (
    ...
    <TestConfigContainer
      configs={...}
    />
  )
}

然后在子组件的构造函数中，你首先在这一行中解构道具

const { configs } = props;

然后将这些 props 设置为组件的本地状态

let stateConfigs = Object.assign({}, configs);
this.state = {
  configs: stateConfigs,
};

这就是你拥有它的方式。

这只是destructuring assignment。

【讨论】：

我还检查了这个组件的父组件，它只是一个常规的 react 超级组件，react.Component 没什么特别的。

【解决方案3】：

在您的代码示例中，组件 TestConfigContainer 不会从 Redux 存储（关于 Redux 的存储 read here）获取数据。

config 属性必须在父组件中设置，并作为自己的属性传递给TestConfigContainer。 Own prop 表示它是直接从父组件传递的，而不是从 Redux 存储中获取的。

在组件的构造函数中（构造函数read here是什么）configs prop 是来自props 对象的destructed，并保存到组件的internal状态。所以在render方法组件中使用的是他的内部状态属性configs。

在const { configs: stateConfigs } = this.state 中，该属性也是destructed 为configs 并重命名为stateConfigs。

【讨论】：