antd cascader 的默认值如果在 useEffect 中设置不工作

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]])

online demo 是bug还是我用错了？

Answer 1

AntD 中的 defaultValue 属性仅在第一次渲染时使用，因为 useEffect 在第一次渲染后运行，你最终没有为级联器设置默认值。之后设置它没有任何效果。如果你想使用defaultValue，你可以确保当cascader渲染时，你已经设置了默认值。

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

如果您希望 cascader 始终呈现，您还可以将受控组件与 value 一起使用。

Codesandbox

antd cascader 的默认值如果在 useEffect 中设置不工作

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

reactjs

antd

ant-design-pro