我可以等待我的组件连接到 react-redux 吗？

Question

如何等待 react-redux 返回我的新连接组件？基本上，我有一个索引屏幕，我在其中对数据库进行查询以保存客户端，该 api 调用的响应是我想要触发我的 SAVE_CUSTOMERS 操作然后在视图中制作地图的参数。

这个错误是因为我想要制作地图的对象尚不存在，这就是为什么我伪造一个等待该哈希以及它是否有效。

我有几种方法可以强制它工作，但我来这里是为了一个奇特的解决方案？？？？

customers.js

import React from "react";
import bridge from "../../helpers/bridge/index";
import { save_customers } from "../../../actions/customers";
import CustomersUI from "../../components/Customers/CustomersUI";
import { connect } from "react-redux";

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

  componentDidMount() {
    bridge
      .getCustomers(this.props.user.access_token)
      .then((customers) => this.props.save_customers(customers))
      .catch((error) => console.error(error));
  }

  render() {
    return (
      <CustomersUI
        customers={this.props.customers}
      />
    );
  }
}

export default connect(
  (state) => ({
    user: state.user,
    customers: state.customers,
  }),
  {
    save_customers: save_customers,
  }
)(CustomersScreen);

我的减速器

export default (state = {}, action) => {
  switch (action.type) {
    case "SAVE_CUSTOMERS":
      return action.customers;
    default:
      return state;
  }
};

还有……动作，

export function save_customers(customers) {
  return {
    type: "SAVE_CUSTOMERS",
    customers,
  };
}

输出

显然我有一个 combineReducers 导出所有内容。

也许等待组件被连接并不是解决它的最花哨的方法，它只是我对它的最接近的想法。不到 1 周前，我还在使用 React Native，之前从未使用过 Redux。谢谢！

Answer 1

您所在州的customers 数组在等待来自getCustomers 的响应时可能未定义。因此，在您的渲染方法上，您应该仅在定义了customers 时有条件地渲染子CustomersUI。

 render() {
    const { customers } = this.props;
    return (
      customers && (
        <CustomersUI
          customers={this.props.customers}
        />
      )
    );
  }

或者，CustomersUI 组件应该处理未定义的值，这样它就不会抛出该错误。