onChange useState 后一字符答案

【问题标题】：onChange useState one character behindonChange useState 后一字符
【发布时间】：2021-01-23 21:46:29
【问题描述】：

我有一个简单的搜索组件，我想构建一个自动完成过滤器，但我的 onChange 事件处理程序落后一个字符。

如果我在搜索栏中输入“tsla”，我的值将是“tsl”

<TextField
                className={classes.queryField}
                fullWidth
                InputProps={{
                  startAdornment: (
                    <InputAdornment position="start">
                      <SvgIcon fontSize="small" color="action">
                        <SearchIcon />
                      </SvgIcon>
                    </InputAdornment>
                  )
                }}
                onChange={event => {
                  setValue(event.target.value);
                  setAuto(
                    tickers
                      .filter(
                        f =>
                          JSON.stringify(f)
                            .toLowerCase()
                            .indexOf(value) !== -1
                      )
                      .slice(0, 10)
                  );
                  console.log(auto);
                }}
                value={value}
                placeholder="Search for a stock"
                variant="outlined"
              />

【问题讨论】：

标签： reactjs react-hooks onchange setstate async.js

【解决方案1】：

问题是您在调用 setAuto 时仍然使用旧的 value 变量。

const Search = (props) => {
  handleChange = (event) => {
    const value = event.target.value
    setValue(value);
    setAuto(tickers.filter((ticker) => JSON.stringify(ticker).toLowerCase().indexOf(value) !== -1).slice(0, 10));
    console.log(auto);
  };

  return (
    <TextField
      className={classes.queryField}
      fullWidth
      InputProps={{
        startAdornment: (
          <InputAdornment position="start">
            <SvgIcon fontSize="small" color="action">
              <SearchIcon />
            </SvgIcon>
          </InputAdornment>
        ),
      }}
      onChange={handleChange}
      placeholder="Search for a stock"
      value={value}
      variant="outlined"
    />
  );
};

解决方案是将新值对象同时传递给 setValue 和 setAuto。

  handleChange = (event) => {
    const value = event.target.value
    setValue(value);
    setAuto(tickers.filter((ticker) => JSON.stringify(ticker).toLowerCase().indexOf(value) !== -1).slice(0, 10));
    console.log(auto);
  };

【讨论】：