不理解我的 Filter 函数和 React 中的状态有什么问题

Question

我有以下代码：

父组件：

class App extends Component {
  state = {
    colors: []
  };

  async componentDidMount() {
    const fetched = await fetch("./response.json");
    const fetchedJson = await fetched.json();
    const res = fetchedJson.colors;

    this.setState({
      colors: res
    });
  }

 
  filterItems = (name) => {
    const lowerCaseName = name.toLowerCase();
    const newColors = [...this.state.colors];
    const res = newColors.filter((color) => {
      const lowerCaseColorName = color.name.toLowerCase();
      return lowerCaseColorName.includes(lowerCaseName);
    });

    this.setState({
      colors: res
    });
  };

  render() {
    const { colors } = this.state;
    return (
      <div>
        <InputText filterItems={this.filterItems} />
        <AllData colors={colors} />
      </div>
    );
  }
}

这是我的子组件：

class Filter extends Component {
  state = {
    inputVal: ""
  };

  onChange = (e) => {
    this.setState({
      inputVal: e.target.value
    });
    this.props.filterItems(e.target.value);
  };

  render() {
    return (
      <form onSubmit={this.onSubmit}>
        <input
          type="text"
          onChange={this.onChange}
          value={this.state.inputVal}
        />
      </form>
    );
  }
}

export default Filter;

还有另一个名为 AllData 的子组件，但它的工作只是显示数据并为其设置样式，所以我不在此处包括它。

目前显示的数据只有：

Fire Dragon
Water Horse
Earth Bird
Wood Dog
Wind Cat

这是我的问题：

当我在过滤器的搜索框中输入单词时，filter 功能正常工作。但是，当我回溯并删除前一个字符直到整个输入字符串时，res 数组不会 return 其整个原始数组，而是仅在我输入更多时保留过滤器的结果。

例如：当我输入字符串“cat”时，res 变为：[{name: "Wind Cat", id: 5} 但是我通过在键盘上回溯删除了那个字符串，res 仍然在 [{name: "Wind Cat", id: 5}。 为什么它不返回 return 所有项目，我该如何解决这个问题？

我目前有这个代码：

onChange = (e) => {
    this.setState({
      inputVal: e.target.value
    });
    this.props.filterItems(e.target.value);
  };

但是，如果我将其更改为：

this.props.filterItems(this.state.inputVal);

和console.log(name)在filterItems的父组件中输出，每次输入字符串时，console.logged name似乎只显示前面的字符.

例如：如果我输入字符串 c -> name 将是 "" （空）如果我输入字符串 ca -> name 将是 c 为什么会这样？

Answer 1

发生这种情况是因为您过滤了数组并因此丢失了对象。您可以做的是拥有 2 个数组，一个包含所有数据，一个包含过滤后的数据。将过滤器应用于包含所有数据的数组，并将过滤后的数组设置为结果

Answer 2

class App extends Component {
    state = {
      colors: [],
      filtered: [],
    };
  
    async componentDidMount() {
      const fetched = await fetch("./response.json");
      const fetchedJson = await fetched.json();
      const res = fetchedJson.colors;
  
      this.setState({
        colors: res
      });
    }
  
   
    filterItems = (name) => {
      const lowerCaseName = name.toLowerCase();
      const newColors = [...this.state.colors];

      const filtered = newColors.filter(color => {
        const parts = color.split(' ').map(part => part.toLowerCase());
        return parts.reduce((carry, part) => {
          return carry ? carry : part.startsWith(lowerCaseName);
        }, false);
      });

      this.setState({
        filtered,
      });
    };
  
    render() {
      const { colors, filtered } = this.state;
      return (
        <div>
          <InputText filterItems={this.filterItems} />
          <AllData colors={filtered ? filtered : colors} />
        </div>
      );
    }
}

不理解我的 Filter 函数和 React 中的状态有什么问题

Not understanding what's wrong with my Filter function and state in React

javascript

reactjs

filter

onchange

setstate