时间戳

首页 > 解决方案 > 搜索引擎 - 状态值与输入值不同

javascript - 搜索引擎 - 状态值与输入值不同

问题描述

搜索引擎不起作用，即：当我输入例如奶牛时进入 devtools 和网络选项卡我有 http://api/Routes/Search？word = co 当我添加空格时我有：http：// api / Routes / Search？word = cow 和搜索，当我删除所有内容时，我得到：http：// api / Routes / Search？word = c，例如我将添加空格然后显示所有结果，因为它应该很奇怪......

<input   type="text" placeholder="search.." value={this.state.search} onChange={this.searchingRoute}     />

searchingRoute = (e) => {
        this.setState({
            search: e.target.value
        })
        if (this.state.search.length === 0) {
            fetch(`http://api/Routes`, {
                headers: {
                    "Content-Type": "application/json",
                    "Authorization": "Bearer " + sessionStorage.getItem("access_token")
                }
            })
                .then(response => {
                    if (response.ok) {
                        return response;
                    }
                    throw Error(response.status)
                })
                .then(response => response.json())
                .then(data =>
                    this.setState({
                        route: [...data],

                    })
                )
                .catch(error => console.log(error))
        }
        fetch(`http://api/Routes/Search?word=${this.state.search}`, {
            headers: {
                "Content-Type": "application/json",
                "Authorization": "Bearer " + sessionStorage.getItem("access_token")
            }
        })
            .then(response => {
                if (response.ok) {
                    return response;
                }
                throw Error(response.status)
            })
            .then(response => response.json())
            .then(data =>
                this.setState({
                    route: [...data],

                })
            )
            .catch(error => console.log(error))

    }

标签： javascriptreactjs

解决方案

这setState是异步代码，这就是为什么在您的searchingRoute函数中的第一if条语句中，它返回旧版本的搜索。

有两种方法可以处理：第一种方法：

searchingRoute = (e) => {
  if (e.target.value.length === 0) {
    ...
  }
}

第二种方法：

searchingRoute = (e) => {
  this.setState({ search: e.target.value });
};

componentDidUpdate(prevProps, prevState) {
  if (this.state.search !== prevState.search) {
    this.handleSearch();
  }
};

handleSearch = () => {
  const { search } = this.state;
  // handling search code...
}

此外，我建议在您的搜索中添加一个 debounce 方法，因为您不希望搜索查询您的服务器每个按下的字母，但在用户停止按下一个字母大约 1 秒或 500 毫秒之后。你可以在这里了解更多信息：在 React.js 中执行去抖动

推荐阅读