地图不是反应中的功能

Question

我已经尝试了三天来解决我不能将多个元素放入数组中的问题，但是如果我只能放入一个当我放入 return 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

只需复制此代码并运行，您将得到想要的答案

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

地图不是反应中的功能

map is not a function in react

javascript

meteor

reactjs