为什么会出现错误：TypeError：无法读取未定义的属性“ map”？

Question

获取错误：TypeError：无法读取未定义的属性“ map”。在重新加载页面之前，它可以正常工作。但是，当我重新加载页面时出现错误。我想从数组中获取对象值。

import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import {fetchData} from '../../actions/fetchData';

class Menu extends Component {
  componentDidMount() {
    this.props.fetchData();
  }

  render() {
    const {data, isFetching} = this.props.data;

    if (isFetching) {
      return (
        <View>
          <ActivityIndicator size={'large'} />
        </View>
      );
    } else {
      return (
        <View
          style={{
            flex: 1,
            flexDirection: 'column',
            alignItems: 'center',
            justifyContent: 'center',
          }}>
          <Text>
            {data.categories.map(nm => nm.name)}
            {/* {console.log("data",data.categories.map(nm => nm.name))} */}
          </Text>
        </View>
      );
    }
  }
}

function mapStateToProps(state) {
  return {
    data: state.data,
  };
}

function mapDispatchToProps(dispatch) {
  return {
    ...bindActionCreators({fetchData}, dispatch),
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(Menu);

Answer 1

我不是react-native开发人员，但是在react方面有少量工作经验。这是我可以理解的，如下所示：

this.state = {
  data: this.props.data,
};

在上述constructor中的代码中，首先在调用类实例时使用state.data进行初始化，并且该类实例将为undefined。因为在调用头等舱时，this.props.data是undefined。

componentDidMount() {
   this.props.fetchData();
}

constructor完成任务后，将执行上述代码，其数据显示在console.log中。但是返回的数据永远不会分配给任何变量。也就是说，在提取数据后，this.state.data仍然是undefined。

因此，当执行<Text>{this.state.data.data.categories.map(nm => nm.name)}</Text>时，this.state.data将是未定义的`。要解决此问题，您可以尝试以下代码：

class Menu extends Component {

  componentDidMount() {
    this.props.fetchData();
  }

  render() {
    return (
      <View>
        <Text>{this.props.data.data.categories.map(nm => nm.name)}</Text>
      </View>
    );
  }
}

最后一件事，我强烈建议您学习反应开发生命周期。谢谢

Answer 2

我以前遇到过这个问题，并且解决了通过图像数组进行映射的问题，因为获取数据是异步的，因此似乎在渲染开始时数据不可用，并且在映射时出现错误，您应该处理您的应用并避免在将数据设置为状态之前进行渲染，因此实现检查器以查看状态下数据是否完全可用，然后让render，这是唯一的解决方案，

Answer 3

尝试使地图保持状况，并保持数据处于状态，并使用getDerivedStateFromProps更新数据