javascript - 为什么会出现错误：TypeError：无法读取未定义的属性“ map”？(Why am I getting an error : TypeError: Cannot read property 'map' of undefined?)

Question

Getting an error: TypeError: Cannot read property 'map' of undefined.

(收到错误：TypeError：无法读取未定义的属性“ map”。)

Before reloading the page it's work fine.

(在重新加载页面之前，它可以正常工作。)

But when I'm reloading the page getting an error.

(但是，当我重新加载页面时出现错误。)

I want to get object values from array.

(我想从数组中获取对象值。)

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>
          <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);

  ask by Marcus translate from so

Answer 1

It happens because your variables

(这是因为您的变量)

const {data, isFetching} = this.props.data;

are inside render, put them out of the render inside state on fetched data and your problem will be solved,

(在渲染内部，将它们从获取的数据的渲染内部状态中移除，您的问题将得到解决，)

*setState data inside componentDidMount

(* componentStateDidMount中的setState数据)