Question

我是Redux新手，当我看到以下代码时，被空的mapStateToProps函数弄糊涂了，如下所示：

async def signin(request):
    data = [request.rel_url.query['username'],
            request.rel_url.query['pass_hash']]

    user = User(request.app['db'], data)
    result = await user.create_user()
    if isinstance(result, ObjectId):
        return web.Response(content_type='application/json', text=convert_json(result))

据我了解，上述功能没有执行任何操作，因此Redux不会向组件提供任何数据。但实际上，该组件确实可以获取数据。我完全感到困惑，整个代码如下：

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

这行是什么意思，请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));，我从没看过这种语法。

Answer 1

您正在获得组件状态而不是Redux状态。还有

const { configs: stateConfigs } = this.state

stateConfigs是configs的别名。因此，现在您可以使用stateConfigs代替configs。

您可以查看我的another post，在其中可以找到很少的链接来详细了解。

Answer 2

请检查此组件的父级，即TestConfigContainer的显示位置。您还可以将道具从父母传递给孩子，因为似乎没有东西通过Redux传递，所以您最初的想法是正确的。

在父级渲染中，我确定您有类似的东西

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

然后在子组件的构造函数中，您首先要在该行中破坏道具

const { configs } = props;

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

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

这就是你要的方式。

这只是destructuring assignment。

Answer 3

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

config道具必须在父组件中设置，并作为其自身的道具传递给TestConfigContainer。拥有prop意味着它是直接从父组件传递的，而不是从Redux商店获取的。

在组件的构造函数（什么是构造函数read here）中，configs道具来自props对象，destructed，并保存到组件的内部州。因此，在render方法中，组件使用其内部状态属性configs。

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

如何在没有mapStateToProps的情况下反应组件获取数据

3 个答案: