在现有 state 过渡期间无法更新（例如在“渲染”中）。 在antd Select中调用onChange function时

Question

我Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state. Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state. 我的 select 组件中的警告

                            <GroupedSelect
                              value={where === 14 ? whereEntityId : where}
                              options={availableWhereTypes}
                              onChange={value => {
                                if (typeof value === 'string') {
                                  handleCharacteristicChange(
                                    value,
                                    index,
                                    conditionIndex,
                                  );
                                } else {
                                  handleWhereTypeChange(
                                    value,
                                    index,
                                    conditionIndex,
                                  );
                                }
                              }}
                            />

handleCharacteristicChange和handleWhereTypeChange调用setState 。 如果我从onChange function 中删除if else错误就消失了。 该组件本身似乎工作正常，但我想摆脱警告消息。

select 组件来自antd稍作修改

Answer 1

我们将在渲染期间更新 state 和对 state 的引用，这将导致不必要且相当重复的重新渲染。

我认为React#useCallback应该有助于记住我们的回调。

你可以内联我不仅仅是为了清楚起见（我假设你正在映射这些）。

import { useCallback } from 'react';

const onChange = useCallback(value => {
  if (typeof value === 'string') {
    handleCharacteristicChange(
      value,
      index,
      conditionIndex,
    );
  } else {
    handleWhereTypeChange(
      value,
      index,
      conditionIndex,
    );
  }
}, [value, index, conditionIndex]);

return (
  <GroupedSelect
    value={where === 14 ? whereEntityId : where}
    options={availableWhereTypes}
    onChange={onChange}
  />
);