Question

好的，我正在使用filter方法制作一个reactjs搜索过滤器，我的问题是每次我按退格键时，它都不会返回到原始状态或ajax调用后在componentdidMount中设置的状态，为什么我的状态没有更新回我在componentDidMount中分配的状态？

这是我的代码。

class FilterInputs extends Component {
  constructor(props) {
    super(props);
    this.state = {
      items: []
    };
    this.onSubmit = this.onSubmit.bind(this);
  }

  searchHandler(event) {
    event.preventDefault();
    let itemss = this.state.items;
    let searcjQery = event.target.value.toLowerCase();
    let x = itemss.filter(el => {
      let searchValue = el.rocket.rocket_name.toLowerCase();
      return searchValue.indexOf(searcjQery) !== -1;
    })

    this.setState({
      items: x
    });
  }

  componentDidMount() {
    axios.get(`http://localhost:8001/api`).then(res => {
      const missions = res.data;
      missions.map(item => {
        const xx = item.rocket.rocket_name;
      });
      this.setState({
        items: missions
      });
    });
  }

我可以知道我做错了什么吗？预先谢谢你。

Answer 1

让我们在名为state的{{1}}中设置一个过滤器，并根据该查询进行呈现。

我已更改代码以使其更具可读性。

rocketNameQuery

搜索过滤器退格后状态未更新回

1 个答案: