reactjs - 如何使用 firestoreConnect 从 ReactJS 中的道具将对象添加到状态？

Question

我在我的项目中使用firebase。在一个组件上，我想显示有关存储在 firestore 中的设备的信息。我使用 react-redux-firebase 将信息传输到道具。但我不能直接使用道具或将其扔进状态。

我尝试使用这两种方法。

class Budget extends Component {

  constructor(props){
    super(props);
    this.state = {
     dev: []
    }
  }
  componentDidMount() {
   this.setState({
     dev: this.props.devices
   })
  }

  render() {
    const {devices, profile, classes, className, ...rest } = this.props;

    const rootClassName = classNames(classes.root, className);

    console.log(this.state)

    return (
      <Paper
        {...rest}
        className={rootClassName}
      >
        <div className={classes.content}>
          <div className={classes.details}>
            <Typography
              className={classes.title}
              variant="body2"
            >
              Device
            </Typography>

            <Typography
              className={classes.value}
              variant="h3"
            >
              Device condition
            </Typography>
          </div>
          <div className={classes.iconWrapper}>
            <MoneyIcon className={classes.icon} />
          </div>
        </div>
        <div className={classes.footer}>
          <Typography
            className={classes.deviceError}
            variant="body2"
          >
            <Error />
            Error
          </Typography>
          <Typography
            className={classes.deviceOk}
            variant="body2"
          >
            <Done />
            Running
          </Typography>
        </div>
      </Paper>
    );
  }
}

Budget.propTypes = {
  className: PropTypes.string,
  classes: PropTypes.object.isRequired
};

const mapStateToProps =(state) => {
  return {
    authError: state.auth.authError,
    auth: state.firebase.auth,
    profile: state.firebase.profile,
    devices: state.firestore.ordered.devices
  }
}

export default compose(withStyles(styles),
  connect(mapStateToProps),
  firestoreConnect((props)=>[
    {
      collection: 'devices',
      where: [
        ['managerId', '==', props.auth.uid],
      ]
    },
  ]))(Budget);

当我运行上面的代码时，状态中的“dev”似乎是未定义的。如果我使用设备道具作为回报，我会收到以下错误消息：“未处理的拒绝（TypeError）：无法读取未定义的属性'名称'”。名称是设备对象的键。

标签： reactjsreact-redux