reactjs 如何更新React状态并在按钮单击时立即使用其状态

dzjeubhm 于 2023-06-29 发布在 React

关注(0)|答案(1)|浏览(146)

我正在用React（Native）构建一个简单的组件，并注意到我的代码有一个问题。假设，我们有一个状态，它将在页面上为我们的搜索值提供可靠性：

const [searchValue, setSearchValue] = useState('')

我们有一个TextInput组件（web上的input），它有以下属性：

<TextInput
    value={searchValue}
    onChangeText={onChangeText}
    onSubmit={onSubmit}
    onPressClear={onPressClear}
/>

这里我们定义函数：

const onSubmit = () => {
  console.log('searchValue is:' + searchValue)
  callApi(searchValue)
}

const onChangeText = (text: string) => {
  setSearchValue(text)
}

const onPressClear = () => {
  onChangeText('')
  onSubmit();
}

现在，这个组件几乎可以正常工作了，但是我想在清除搜索后请求API调用，并且在完成后调用submit函数。显然，此时状态不会被更新，因为状态在提交函数中没有被更改。当我按下清除按钮时（如果我在searchValue中有东西），我不会得到一个清除状态。
在useEffect中使用searchValue依赖项 Package 状态并调用submit函数对我们来说并不好，因为我们只想跟踪提交。
当我们清除状态时，在提交函数中得到空的searchValue的正确解决方案是什么？

reactjs

来源：https://stackoverflow.com/questions/76571451/how-to-update-react-state-and-immediately-use-its-state-on-a-button-click

1条答案

按热度按时间

7gcisfzg1#

试试这个：

import { useState, useEffect } from 'react';

const MyComponent = () => {
  const [searchValue, setSearchValue] = useState('');
  const [isFormCleared, setIsFormCleared] = useState(false);

  const onSubmit = () => {
    console.log('searchValue is: ' + searchValue);
    callApi(searchValue);
  };

  const onChangeText = (text: string) => {
    setSearchValue(text);
    setIsFormCleared(false);
  };

  const onPressClear = () => {
    setSearchValue('');
    setIsFormCleared(true);
  };

  useEffect(() => {
    if (isFormCleared) {
      onSubmit();
    }
  }, [isFormCleared]);

  return (
    <TextInput
      value={searchValue}
      onChangeText={onChangeText}
      onSubmit={onSubmit}
      onPressClear={onPressClear}
    />
  );
};

export default MyComponent;

赞(0）回复(0）举报 2023-06-29

我来回答

reactjs 如何更新React状态并在按钮单击时立即使用其状态

1条答案

相关问题

热门标签

最新问答