无法使用ReactJS读取未定义的属性“过滤器”

Question

我想使用axios过滤列表以获取名称，如图所示：

当我尝试对其进行过滤时，它可以很好地工作，但是当我单击删除按钮时，该行将被删除，我得到：Unhandled Rejection (TypeError): Cannot read property 'filter' of undefined，而当我单击查看按钮时，我没有得到该页面的观点。

我的代码如下：

class ListeLivs extends Component {
  constructor(props) {
    super(props);
    this.state = {
     clients: [],
  search :"",
  alert: null

    };

     this.handleView = this.handleView.bind(this);
this.handleEdit = this.handleEdit.bind(this);
this.delete = this.delete.bind(this)
this.onchange = this.onchange.bind(this)
 componentDidMount() {
    axios({
      method: "get",
      url: "/app/listeclients/",
      withCredentials: true,
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json"
      }
    }).then(response => {
      if (response && response.data) {
        this.setState({ clients: response.data });
      }
    }).catch(error => console.log(error));
  }
  popupdel(Code) {
    const getAlert = () => (<SweetAlert 
        warning
        showCancel
        confirmBtnText="Supprimer"
        confirmBtnBsStyle="danger"
        cancelBtnBsStyle="Annuler"
        title="Êtes-vous sûr de supprimer ce client ?"
        onConfirm={() => this.delete(Code)}
        onCancel={() => this.onCancel()} >
       Vous ne pouvez pas restaurer ce client ! 
      </SweetAlert>);
    this.setState({
      alert: getAlert()
    });
  }
  onCancel() {
    this.setState({
      alert: null
    });
  }
  delete(Code) {
    axios.delete('http://localhost:4000/app/deleteclient/' + Code).then(function(clients) {
      this.setState({
        clients: clients.records
      });
      this.setState({
        alert: null
      });
      /*swal("Êtes-vous sûr de supprimer ce client ?", {
        buttons: ["Annuler", "Supprimer"],*/
      window.location.reload()
    }.bind(this));
  }
  onchange = (e) => {
    this.setState({ search: e.target.value });
  }
  handleView(Code) {
    try {

      console.log("Voir client")
      this.props.history.push('/clients/viewclient/' + Code);
    }
    catch (error) {
      this.setState({ error });
    }
  }

    catch (error) {
      this.setState({ error });
    }
  }
  render() {
    let { clients } = this.state;
     const { search } = this.state;

    }

    const filteredClients = clients.filter( client =>{
            return client.Prenom.toLowerCase().indexOf( search.toLowerCase() ) !== -1
        })

    return (<div className="animated fadeIn">


            <Card style={{ height:"auto"}}>
              <CardHeader>
                <h4>
                  <strong>
                    <i className="fa fa-align-justify" /> Tous les clients
                   <InputGroup style={{ float:"right", width:"250px"}}>

                            <Input onChange={this.onchange} type="search"/>
                            <InputGroupAddon addonType="prepend">
                              <InputGroupText><i className="fa fa-search" aria-hidden="true"></i></InputGroupText>
                            </InputGroupAddon>

                          </InputGroup>

                  </strong>
                </h4>

              </CardHeader>
              <CardBody>

                     <Table  bordered responsive size="sm" style={center} hover>
                      <thead >
                        <tr>
                          <th ><strong>Code</strong></th>
                          <th scope="col">Prenom</th>
                          <th scope="col">Nom</th>
                          <th scope="col">Email</th>
                          <th scope="col">Telephone</th>
                          <th scope="col">Action</th>
                        </tr>
                      </thead>
                      <tbody>
                                      {
                            filteredClients.map( client =>                                
 <tr key={client.Code}>
        <th scope="row">{client.Code}</th>
        <td>{client.Prenom}</td>
        <td>{client.Nom}</td>
        <td>{client.Email}</td>
        <td>{client.Telephone}</td>
        <td><button style={btn}   onClick={(Code) =>this.handleView(client.Code) } type="button"><i class="fa fa-eye"></i></button>
                                <button style={btn} onClick={(Code)=>this.handleEdit(client.Code)} type="button"><i class="fa fa-edit"></i></button>

                           <button style={btn} onClick={(Code) => this.popupdel(client.Code)} type="button"><i class="fa fa-trash-o"></i>

                         </button>
                         {this.state.alert}

                           </td>
    </tr>

                          )}
                      </tbody>
                    </Table>

              </CardBody>
            </Card>



      </div>);
  }
}

export default ListeClients;

我该如何解决？

Answer 1

看来/app/deleteclient/返回的结果不是数组。

您需要确保它是一个数组。

delete(Code) {
        axios.delete('http://localhost:4000/app/deleteclient/' + Code).then(function(clients) {
          this.setState({
            clients: clients.records || []
          });