React js过滤器无法正常工作，删除字符时不会返回项目

Question

我试图根据用户输入创建过滤功能。过滤器工作正常，但删除字符时不会返回项目。我知道它与更新状态有关。我希望有人可以帮助我。

import React, {Component} from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

class Fetch extends Component {
  constructor(){
    super();
    this.state = {
      data: []
    }

    this.handleChange = this.handleChange.bind(this)
  }

  handleChange = (event) => {
    console.log(event.target.value);
    return this.setState({data: this.state.data.filter(data => data.title.toLowerCase().includes(event.target.value.toLowerCase()))})
  }

  async componentDidMount() {
    try {
    const response = await fetch(`https://jsonplaceholder.typicode.com/todos`);
    const json = await response.json();
    this.setState({ data: json }); 
    }
    catch (error) {
      console.error(error)
    }
  }

  render() {
    return(
        <div>
          <p><Link to={`/`}>Link to homepage</Link></p>
          <form>
            <input type="text" onChange={this.handleChange}></input>
          </form>
          <ul>
            {
              this.state.data.map(data => (
                <li key={data.id}>{data.id} => {data.title}</li>
              ))
            }
          </ul>
        </div>
    )
  }
}
export default Fetch;

Answer 1

这是因为您不保留从HTTP请求获取的初始数据。这是问题所在：

1. 最初状态：data = []
2. ComponentDidMount：data = ['abc', 'bcd', 'cdf']
3. 过滤关键字b：data = ['abc', 'bcd']（因为cdf不包含字母b）
4. 擦除过滤器（filter = ''）但您的数据变量的值为data = ['abc', 'bcd']，因此它最多可以返回2个值。

Answer 2

你的代码看起来很好，但是你的过滤器函数正在覆盖状态的data属性。我建议将整个数组存储在data中（就像你现在一样）并将过滤后的结果存储在状态的另一个属性中，如下所示：

import React, {Component} from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

class Fetch extends Component {
  constructor(){
    super();
    this.state = {
      data: [], 
      filtered: [] // This will store your filtered elements from data
    }

    this.handleChange = this.handleChange.bind(this)
  }

  handleChange = (event) => {
    console.log(event.target.value);
    // Filter the array stored in data, but never update it. 
    // Update filtered instead.
    return this.setState({filtered: this.state.data.filter(data => data.title.toLowerCase().includes(event.target.value.toLowerCase()))})
  }

  async componentDidMount() {
    try {
    const response = await fetch(`https://jsonplaceholder.typicode.com/todos`);
    const json = await response.json();
    // Keep the original data here.
    this.setState({ data: json }); 
    }
    catch (error) {
      console.error(error)
    }
  }

  render() {
    return(
        <div>
          <p><Link to={`/`}>Link to homepage</Link></p>
          <form>
            <input type="text" onChange={this.handleChange}></input>
          </form>
          <ul>
            {
              this.state.filtered.map(data => (
                <li key={data.id}>{data.id} => {data.title}</li>
              ))
            }
          </ul>
        </div>
    )
  }
}
export default Fetch;

请记住，filter不会修改原始数组，它总是返回一个新数组。

Answer 3

您可以使用以下解决方案来解决您的问题：

this.setState({ data:  this.state.data.filter(data => data.title.toLowerCase().indexOf(event.target.value.toLowerCase().trim() !== -1) ) })