相关疑难解决方法(0)

对于类组件,this.setState如果在事件处理程序内部则调用批处理.但是如果在事件处理程序之外更新状态并使用'useState'钩子会发生什么？

function Component() {
  const [a, setA] = useState('a');
  const [b, setB] = useState('b');

  function handleClick() {
    Promise.resolve().then(() => {
      setA('aa');
      setB('bb');
    });
  }

  return <button onClick={handleClick}>{a}-{b}</button>
}

它会useState马上渲染吗？或者它会是aa - bb然后aa - b呢？

过去，我们曾明确警告过调用setState({myProperty})是异步的，并且this.state.myProperty直到回调或下一个render()方法才有效。

使用useState，如何在显式更新状态后获取状态的值？

钩子如何工作？据我所知，setter函数useState不接受回调，例如

const [value, setValue] = useState(0);
setValue(42, () => console.log('hi callback');

不会导致回调运行。

在旧世界中，我的另一种解决方法是(e.g. this.otherProperty = 42)在类上挂一个实例变量，但这在这里不起作用，因为没有函数实例可以重用（this在严格模式下不可以）。

我真的很难等待状态更改。我正在使用反应钩子和上下文。

基本上，我有一个自定义下拉列表，这里没有使用表单元素。单击时，它将运行一个函数来更改两个参数的状态：

// IdeaFilters.js
const organizationContext = useOrganization();
const { organization, filterIdeas, ideas, loading } = organizationContext;

const [filter, setFilter] = useState({
    statusId: "",
    orderBy: "voteCount"
  });

  // Build the parameters object to send to filterIdeas
  const onClick = data => {
    setFilter({ ...filter, ...data });
    filterIdeas(filter);
  };

所以onClick附加到渲染方法中的下拉列表：

First dropdown:
<Dropdown.Item onClick={() => onClick({ orderBy: "popularityScore" })}>Popularity</Dropdown.Item>

Second dropdown:
<Dropdown.Item key={status.id} onClick={() => onClick({ statusId: status.id })}>
  {status.name}
</Dropdown.Item>

fetchIdeas()基本上运行一个在我的上下文中可用的函数，它为我的 axios 请求构建这些参数。每次单击时，都需要单击两次才能运行该想法。有时它会按预期运行，但大多数时候需要单击两次。

我遇到这个问题的任何原因？

任何帮助将不胜感激！