来自API的数据未输出| React，Redux

Question

我从API获取数据，并且我使用React和Redux来执行此操作。我成功从API获取数据。 这是带有输出的console.log：

console.log(this.props.customer.data)  

但是我无法在我的React应用中显示它。我打赌我的问题非常基本，但我真的不明白为什么这不起作用。

我尝试在return内执行此操作：

{this.props.customer.data.map(customers => <p>{customers.name}</p>)}

但我只得到错误：TypeError: Cannot read property 'map' of undefined。

如果有人知道为什么会这样，请告诉我！谢谢！

（我知道我不应该单独使用我的道具，因为它代表了多个顾客......）

Answer 1

您基本上尝试迭代undefined / null对象。好的做法是将redux存储中的数组初始状态设置为空数组。在此之后，您不必在组件中添加其他检查以检查阵列是否确实存在。 Array.prototype.map只是不知道迭代一个空数组并且不会渲染任何东西。确保将初始状态customer.data设置为reducer中的空数组。

Answer 2

问题是您没有customer.data的初始值。您在另一条评论中提到您的减速器设置如下：

export function customer(state = [], action) {
  ...
}

将customer设置为数组。相反，在你的reducer中做这样的事情：

const initialState = {
  data: [] // <-- Default value for customer.data is an empty array
};

export function customer(state = initialState, action) {
  ...
}

Answer 3

如果您从API获取数据，则初始渲染中没有数据，因此您应该尝试以下内容：

@Configuration
public class MyConfig {

  @Bean
  public PartnerServicePortType partnerServicePortType() {
    PartnerServicePortType partnerServicePortType = new PartnerServiceV0().getPartnerService();