antd cascader's default value if not working if set it in useEffect

Question

it works if hard code it like :

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

but if I use setDefaultValue() in useEffect, it is not working :

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

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

online demo it's a bug or I use it in a wrong way?

Answer 1

The defaultValue prop in AntD is used only on first render, since useEffect runs after first render, you end up without a default value for the cascader. Setting it afterwards does not have any effect. If you want to use defaultValue, you can make sure that when cascader renders, you will already have set the default value.

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

You can also use a controlled component with value if you want the cascader rendered at all times.

Codesandbox