TypeError：无法读取null，REACTJS和Axios的属性'map'

Question

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

                    <ul>
                      { this.state.filter.map(book => (
                        <li key={book.id}>{book.title},{book.author}</li>
                      ))}
                    </ul>
，我有此错误：TypeError：无法读取null的属性'map'。为了正确显示请求结果，我可以更改/添加什么代码？ （我发布的网络图片没有地图）

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;

我正在创建搜索栏。用户编写请求，然后按搜索按钮，该请求将存储在搜索中，并通过Axios发送，最后返回结果。但是，我得到了很好的结果...

Answer 1

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

Answer 2

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