Question

我已经尝试了三天，以解决无法将几个元素放入数组的问题，但是如果我只能放入一个元素的话，当我在返回this.state.dat.nombre或dat.carrera中输入时，但是如果我尝试使用map函数，我不会得到

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      dat: [],
      isFetch: true
    };
  }

  componentDidMount() {
    var url =
      "https://cors-anywhere.herokuapp.com/http://sipla.cuci.udg.mx/sc/horariop.php?c=219359735&k=0d8ce4fab5f4df9ce711cae81e044e1a";

    fetch(url, {
      method: "GET",
      headers: {
        "X-Requested-With": "XMLHttpRequest"
      }
    })
      .then(response => {
        return response.json();
      })
      .then(art => {
        this.setState({ dat: art, isFetch: false });
      });
  }

  render() {
    if (this.state.isFetch) {
      return "cargando....";
    }

    this.state.dat.map(art => {
      return (
        <tr key={art.codigo}>
          <td>{art.nombre}</td>
          <td>{art.carrera}</td>
          <td>{art.horarios}</td>
        </tr>
      );
    });
  }
}

export default App;

Answer 1

当我检查您的API时，我得到了这些数据

{
    carrera: "INGENIERIA EN COMPUTACION"
    ciclo_ingreso: "2019A"
    clave_carrera: "INCO"
    codigo: "219359735"
    cu: "CENTRO UNIVERSITARIO DE LA CIENEGA"
    estatus: "ACTIVO"
    fecha_consulta: "2019-07-12 12:20:20"
    horarios: (4) [{…}, {…}, {…}, {…}]
    nivel: "LICENCIATURA"
    nombre: "MARIA CECILIA PEREZ PEREZ"
    sede: "CAMPUS OCOTLAN"
    ultimo_ciclo: "2019B"
}

这不是数组。 map函数用于数组。

如果要使用此数据，则可以这样写。

render() {

    if(this.state.isFetch){
        return 'cargando....'
    }
    const {dat} = this.state;
    return (
        <tr key={dat.codigo}>
          <td>{dat.nombre}</td>
          <td>{dat.carrera}</td>
          <td>{dat.horarios}</td>
        </tr>
     );
}

Answer 2

您正在尝试在对象上使用map。

要遍历对象的键：

Object.keys(MyObject).map(key => console.log(MyObject[key]))

要遍历对象的对象，请执行以下操作：

Object.keys(MyPseudoArray).map(key =>{
    const element = MyPseudoArray[key]
    //actions to each element
})

Answer 3

只需复制此代码并运行，您将获得所需的答案

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      dat: [],
      isFetch: true
    };
  }

  componentDidMount() {
    let dat = []
    var url =
      "https://cors-anywhere.herokuapp.com/http://sipla.cuci.udg.mx/sc/horariop.php?c=219359735&k=0d8ce4fab5f4df9ce711cae81e044e1a";

    fetch(url, {
      method: "GET",
      headers: {
        "X-Requested-With": "XMLHttpRequest"
      }
    })
      .then(response => {
        return response.json();
      })
      .then(art => {
        dat.push(art)
        this.setState({ dat, isFetch: false });
      });
  }

  render() {
    if (this.state.isFetch) {
      return "cargando....";
    }

    this.state.dat.map(art => {
      return (
        <tr key={art.codigo}>
          <td>{art.nombre}</td>
          <td>{art.carrera}</td>
          <td>{art.horarios}</td>
        </tr>
      );
    });
  }
}

export default App;```

映射不是反应函数

3 个答案: