TypeError：无法读取 null、REACTJS 和 Axios 的属性“地图”答案

【问题标题】：TypeError: Cannot read property 'map' of null, REACTJS and AxiosTypeError：无法读取 null、REACTJS 和 Axios 的属性“地图”
【发布时间】：2020-08-08 04:41:57
【问题描述】：

我正在创建一个搜索栏。用户写下他的请求，当他按下搜索按钮时，它被存入search，通过Axios发送，并在最后返回结果。但是，我在控制台中得到了很好的结果（后面的代码还可以），但是我没有设法在我的页面中显示数据，因为当我在返回中添加这些行时

                    <ul>
                      { this.state.filter.map(book => (
                        <li key={book.id}>{book.title},{book.author}</li>
                      ))}
                    </ul>

，我有这个错误：TypeError: Cannot read property 'map' of null。为了正确显示我的请求结果，我可以在我的代码中更改/添加什么？（我发的是网络图，没有地图）

import React, {Component} from 'react';
import {
    MDBContainer,MDBCol, MDBBtn, 
  } from 'mdbreact';
import "./acceuil.css";
import axios from 'axios';

class Acceuil extends Component{
  constructor(props){
    super(props);
    this.state = {
      search:'',
      filter: null,
      error:'',
    }
    this.searchTitle = this.searchTitle.bind(this);
  }

  change = e => {
    this.setState({
      [e.target.id]: e.target.value,
      });
  }  

  searchTitle = (search) => e => {
    console.log(search);
    let formData = new FormData();
    formData.append("search",search);
    const url = "http://localhost:8888/recherche/recherche_titre.php"
    axios.post(url, formData)

    .then(response => response.data)

    .then((data) => {
      this.setState({filter: data});
      console.log(this.state.filter)
    })


    setTimeout(() => {
      this.setState({
        error: '',
      });
    }, 2000);

    e.preventDefault();
  }

    render() {
        const container = {height:530};

        return(
            <div>
                <div className="searchPosition">
                  <MDBCol>
                    <div className="active-pink-3 active-pink-4 mb-4">
                      <input className="form-control" id="search" type="text" placeholder="Search" onChange={this.change} />
                    </div>
                  </MDBCol>
                </div>
                <div>
                  <MDBBtn  onClick={this.searchTitle(this.state.search)} color="dark" size="lg">Search</MDBBtn>

                <ul>
                  { this.state.filter.map(book => (
                  <li key={book.id}>{book.title},{book.author}</li>
                  ))}
                </ul>
            </div>

        );
    }
}

export default Acceuil;

【问题讨论】：

如果文件管理器为空，不访问？
我希望过滤器包含“data.results.livres”

标签： javascript reactjs api search axios

【解决方案1】：

解决此问题的方法之一是在构造函数中将填充符设置为数组。

constructor(props){
  super(props);
  this.state = {
    search:'',
    filter: [], // <== THIS CHANGED
    error:'',
  }
  this.searchTitle = this.searchTitle.bind(this);
}

或者您可以更改渲染方法以忽略 null 过滤器，我个人更喜欢这种方式，因为您知道您的请求是否已加载

this.state.filter ? this.state.filter.map(book => ...) : <em>Loading...</em>;

【讨论】：

【解决方案2】：

可能的一种选择是在使用.map() 之前检查null 的值。

尝试使用&&，如下所示：

<ul>
   { this.state.filter && this.state.filter.map(book => (
       <li key={book.id}>{book.title},{book.author}</li>
   ))}
</ul>

我希望这会有所帮助！

【讨论】：