Question

嘿，所有尝试使用useState react钩子设置状态但无法正常工作的人，我经历了official documentation

似乎我正确地遵循了它，但是仍然无法获得设置状态的钩子：

const [search, setSearch] = useState('');
const { films } = props;

const matchMovieSearch = (films) => {
    return films.forEach(item => {
        return item.find(({ title }) => title === search);
    });
}

const handleSearch = (e) => {
    setSearch(e.target.value);
    matchMovieSearch(films);
}




<Form.Control 
                type="text" 
                placeholder="Search Film" 
                onChange={(e) => {handleSearch(e)}}
            />

即使我进行调试，useState中的搜索变量始终为空，并且可以看到e.target.value必须更正从html字段输入的数据

Answer 1

setSearch是一个异步调用，您将无法在设置状态后立即获取search。

useEffect在这里救援。

useEffect(() => {
    // your action
}, [search]);

Answer 2

确定要在组件内部使用挂钩，挂钩只能在功能性React组件中使用。

如果不是这种情况，Form.Control组件肯定有问题，可能就像该组件没有正确实现onChanged参数一样。

这是我使用html input元素测试过的，并且工作正常。我使用了useEffect钩子来跟踪search变量上的更改，您可以看到该变量已正确更新。

https://codesandbox.io/s/bitter-browser-c4nrg

export default function App() {
  const [search, setSearch] = useState("");

  useEffect(() => {
    console.log(`search was changed to ${search}`);
  }, [search]);

  const handleSearch = e => {
    setSearch(e.target.value);
  };

  return (
    <input
      type="text"
      onChange={e => {
        handleSearch(e);
      }}
    />
  );
}

反应挂钩未设置状态

2 个答案: