Значение по умолчанию для antd cascader, если не работает, если установить его в useEffect

Question

работает, если жесткий код похож на:

  <Cascader
        defaultValue={["County"]}
        className="custom_select"
        expandTrigger="hover"
        options={options_3}
        onChange={onChange}
        placeholder="Please select"
        changeOnSelect
        disabled={true}
      />

, но если я использую setDefaultValue () в useEffect, он не работает:

  const [defaultValue, setDefaultValue] = useState([]);

  useEffect(()=>{
    setDefaultValue(['Global'])
  },[defaultValue[0]])

онлайн-демонстрация это ошибка или я ее неправильно использую?

Answer 1

Пропеллер defaultValue в AntD используется только при первом рендеринге, поскольку useEffect запускается после первого рендеринга, в результате вы не получите значение по умолчанию для каскадера. Установка этого впоследствии не имеет никакого эффекта. Если вы хотите использовать defaultValue, вы можете убедиться, что при рендеринге каскадом вы уже установили значение по умолчанию.

const [defaultVal, setDefaultVal] = useState();
useEffect(() => {
  setDefaultVal(['zhejiang', 'hangzhou', 'xihu']);
}, []);
return (
  <div>
      {defaultVal && (
        <Cascader
          defaultValue={defaultVal}
          options={options}
          onChange={onChange}
        />
      )}
  </div>
)

Вы также можете использовать управляемый компонент с value, если хотите каскад рендерился во все времена.

Codesandbox