Невозможно прочитать свойство 'map' из неопределенного REACT

Question

constructor(){
    super();
    this.state = {
        lista: [],
    }
}      

componentDidMount(){
    fetch('http://lospraianos-env-1.qu3skpxsmw.sa-east-1.elasticbeanstalk.com/api/materials')
      .then(response => response.json())
      .then(resData => {
        this.setState( {data: resData.results});
      })

}

<div>
  <table className="pure-table">
    <thead>
      <tr>
        <th>id</th>
        <th>Produto</th>
        <th>Quantidade</th>
      </tr>
      </thead>
        <tbody>{
          this.props.lista.map(function(data){
            return (  
              <tr key={data.codMat}>
                <td>{data.codMat}</td>
                <td>{data.material}</td>
                <td>{data.qntMin}</td>
              </tr>
              );
            })
            }
        </tbody>
  </table>
</div>

Я пытаюсь получить информацию из API и создать из нее таблицу, но у меня появляются некоторые ошибки.

Не удается прочитать свойство 'map' из неопределенного

как с этим справиться?

Answer 1

Вы устанавливаете ответ на данные переменной состояния, которых нет в вашем коде.Вам нужно установить его в lista вместо данных в вызове API Api, например

    this.setState({lista : resData.results});

А здесь выполните условную проверку и выполните .map

.map без возврата

  <tbody>{
      this.props.lista && this.props.lista.map(data => (
          <tr key={data.codMat}>
            <td>{data.codMat}</td>
            <td>{data.material}</td>
            <td>{data.qntMin}</td>
          </tr>
        ))
        }
    </tbody>

.map с возвратом

  <tbody>{
      this.props.lista && this.props.lista.map(data => {
          return (<tr key={data.codMat}>
            <td>{data.codMat}</td>
            <td>{data.material}</td>
            <td>{data.qntMin}</td>
          </tr>)
        })
        }
    </tbody>

Answer 2

Есть несколько проблем с вашими кодами.Попробуйте исправить это:

 constructor(props) {  //fixed
    super(props);  //fixed
    this.state = {
      lista: []
    };
  }

  componentDidMount() {
    fetch(
      'http://lospraianos-env-1.qu3skpxsmw.sa-east-1.elasticbeanstalk.com/api/materials'
    )
      .then(response => response.json())
      .then(resData => {
        this.setState({ lista: resData.results });   //fixed
      });
  }

и ...

  {
    this.state.lista.length > 0 && this.state.lista.map(function(data) {   //fixed
      return (
        <tr key={data.codMat}>
          <td>{data.codMat}</td>
          <td>{data.material}</td>
          <td>{data.qntMin}</td>
        </tr>
      );
    })
  }

Answer 3

Насколько я вижу, есть 2 проблемы с данным кодом,

первая:

Вы запускаете Array.prototype.map() на this.props.lista, когда фактическиймассив this.state.lista

Кроме того, componentDidMount() выполняется после функции render(), поэтому либо переместите fetch() в constructor, либо установите условие для вашей функции карты

Прочитайте https://reactjs.org/docs/react-component.html#mounting для лучшего понимания жизненных циклов React.component

Answer 4

Я вижу, что вы установили начальное состояние с этим массивом lista[].У вас есть такой массив, который также передается как опора?Если да, проверьте на опечатки, и вы также можете использовать конструктор с аргументом props, который вы передадите в супер вызове, например,

constructor(props){
     super(props);
     .......
}

Answer 5

Вы устанавливаете это. state .lista для хранения данных массива.

Вы пытаетесь отобразить это. props .lista.

this.state! == this.props.

Измените this.props.lista.map на this.state.lista.map, и оно должно работать.

Answer 6

Я бы порекомендовал сделать условный рендеринг, проверив сначала свойство lista перед отображением всех данных.

{
          this.props.lista && this.props.lista.map(function(data){
            return (  
              <tr key={data.codMat}>
                <td>{data.codMat}</td>
                <td>{data.material}</td>
                <td>{data.qntMin}</td>
              </tr>
              );
            })
            }

Также у вас есть ошибка в

this.setState( {data: resData.results});

Так как вам нужно установить состояние для lista:resData.results, а не data