从 useRef() 获取输入值时获取 useState 是滞后的

Question

当我使用 inputs ref={inputRef} 并使用 setState 时，state 的值总是落后一步 - 意思是，它拥有之前的 value。

当我在输入字段中键入任何字符串时，在第一个按钮中它将有一个空字符串，只有在第二个按钮单击时它才会有我输入的字符串并会触发 console.log('searchString', searchString); TWICE！

我在上一个问题中得到建议，而不是每次我在输入字段中按下一个字母时都调用onChange={(e) => onChangHandler(e)}，我可以在单击activeSearch() 的按钮时获取整个值ONE只有时间。

function Header({ setingResults }) {
  const [productsObj, setObjs] = useState([]);
  const [searchString, setString] = useState('');
  const inputRef = useRef();


 // const onChangHandler = (e) => {
 //   setString(e.target.value);
 // };

  const activeSearch = () => {
    setString(inputRef.current.value);
    if (searchString.length > 0) {
      console.log('searchString', searchString);
      setingResults(searchString);
    }
  };
  return (
    <div>
      <header className='header-shop'>
        Welcome to Vitamins Store
        <br />
        <input
          placeholder='Search here'
          ref={inputRef}
          // value={searchString}
          // onChange={(e) => onChangHandler(e)}
        />
        <button onClick={activeSearch}>Search</button>
      </header>
    </div>
  );
}
export default Header;

有人知道这里有什么问题吗？

我会很高兴得到一些帮助。

Answer 1

不是 useRef 但 useState 是滞后的。

  const activeSearch = () => {
    setString(inputRef.current.value);
    // here searchString is old value
    if (searchString.length > 0) {
      console.log('searchString', searchString);
      setingResults(searchString);
    }
  };

Answer 2

如果我正确理解了您的目标，那么执行此操作的首选方法会更简单一些。

function Header({ setResults }) {
  const [searchString, setSearchString] = useState('');
  const activeSearch = () => setResults(searchString);
  const searchChange = (e) => setSearchString(e.target.value);
  return (
    <div>
    <header className='header-shop'>
        Welcome to Vitamins Store
        <br />
        <input
        placeholder='Search here'
        value={searchString}
        onChange={searchChange}
        />
        <button onClick={activeSearch}>Search</button>
    </header>
    </div>
  );
}
export default Header;

在您的输入上设置value 和onChange 使其成为"controlled input"，每次更改输入值时设置searchString 的值，并将activeSearch 传递给按钮的onClick使用输入的当前值调用您的 setResults 道具。

如果您只需要跟踪输入值，则很少需要refs。