Question

我正在尝试通过对象数组进行映射，每个对象都是从我项目中的JSON文件夹中提取的。然后我想将每个对象渲染为一个反应组件。为此，我将组件的状态设置为该对象数组。

class List extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: []
    };
  }

当我console.log（）我的状态似乎是我所需要的，但是当我尝试console.log（）该数组的第一个元素时，它是未定义的。这是console.log（this.state.data）

[]
0: {description: "AirEuropa Boarding Pass", organizationName: "Air Europa", passTypeIdentifier: "pass.com.globalia.aireuropa.boardingpass", serialNumber: "RB47ZP20082C640001010191641560895200000", teamIdentifier: "ELASV6M68G", …}
1: {formatVersion: 1, passTypeIdentifier: "pass.com.renfe-RenfeTicket", serialNumber: "00HHGV7F7353900982276", teamIdentifier: "H9VY2F2XZA", webServiceURL: "https://www.myserver.com/pathto/service", …}
length: 2
__proto__: Array(0)

为什么this.state.data [0]未定义？

这就是我从JSON获取数据的方式

    const arr = [];
    axios
      .get("data")
      .then(res => {
        const arrayDatas = res.data;
        arrayDatas.forEach(element => {
          if (element.includes(".json")) {
            axios.get("data/" + element).then(res => {
              arr.push(res.data);
            });
          }
        });
        this.setState({
          data: arr
        });
      })
      .catch(error => console.error(error));
  }

Answer 1

您应按照以下建议更新状态。

    const arr = [];
    axios
      .get("data")
      .then(res => {
        const arrayDatas = res.data;
        arrayDatas.forEach(element => {
          if (element.includes(".json")) {
            axios.get("data/" + element).then(res => {
              arr.push(res.data);
            });
          }
        });
        this.setState({
           data: arr
         });

      })
      .catch(error => console.error(error));
  }

Answer 2

const arr = [];
    axios
      .get("data")
      .then(res => {
        const arrayDatas = res.data;
        arrayDatas.forEach(element => {
          if (element.includes(".json")) {
            axios.get("data/" + element).then(res => {
              this.setState({data: res.data});
            });
          }
      })
      .catch(error => console.error(error));
  }

为什么我不能访问JSON数组中的元素

2 个答案: