antd 级联的默认值，如果设置为使用效果，则不起作用

Question

如果喜欢硬编码，它就会工作：

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

但如果我在useEffect中使用setDefaultValue((，它就不起作用：

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

在线演示这是个bug还是我用错了？

Answer 1

AntD中的defaultValue道具仅在第一次渲染时使用，因为useEffect在第一次呈现后运行，因此最终不会为级联器设置默认值。之后设置它没有任何效果。如果要使用defaultValue，可以确保级联渲染时已经设置了默认值。

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

如果希望始终渲染级联，也可以将受控组件与value一起使用。

Codesandbox