类型错误：未定义不是对象，从 JSON 映射数据时出现错误

Question

我首先过滤来自 API 的数据，然后将其存储在 const 中。我正在尝试映射存储在常量中的那个对象，但我遇到了这个错误 我的代码是：

secondPicker = () => {
    if (this.state.PickerValueHolder === 'Punjab') {
        const space = this.state.myData.filter(x => x.label === 'Punjab');
        console.log(space.children);
        return (<Picker
                style={styles.dropDown}
                label="Select City"
                onValueChange={(itemValue, itemIndex) => this.setState({ PickerValueHolderCity: itemValue })}
                selectedValue={this.state.PickerValueHolderCity}
            >
                {space.children.map((item, key) => (
                    <Picker.Item label={item.label} value={item.value} key={key} />)
                )}
            </Picker>
        )
    }
    else{return} 
}

当我控制台日志“空间”时，我得到以下数据：

我从中获取数据的 API 是：https://retailsolution.pk/api/countrywise

Answer 1

您正在将数组中具有标签Punjab 的所有元素过滤到一个新数组中。如果您想使用这种方法，您必须访问此新数组中的第一个元素，并通过该对象中的children 数组访问map。

space[0].children.map((item, key) => ( /* ... */ ))

您也可以使用find，以便在space 变量中而不是数组中获得所需的对象。

secondPicker = () => {
  if (this.state.PickerValueHolder === "Punjab") {
    const space = this.state.myData.find(x => x.label === "Punjab");

    return (
      <Picker
        style={styles.dropDown}
        label="Select City"
        onValueChange={(itemValue, itemIndex) =>
          this.setState({ PickerValueHolderCity: itemValue })
        }
        selectedValue={this.state.PickerValueHolderCity}
      >
        {space.children.map((item, key) => (
          <Picker.Item label={item.label} value={item.value} key={key} />
        ))}
      </Picker>
    );
  } else {
    return null;
  }
};