antd cascader的默认值如果在useEffect中设置它不起作用

【问题标题】：antd cascader's default value if not working if set it in useEffectantd cascader的默认值如果在useEffect中设置它不起作用
【发布时间】：2020-06-04 12:33:34
【问题描述】：

如果硬编码它就可以工作：

  <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 这是一个错误还是我以错误的方式使用它？

【问题讨论】：

标签： reactjs antd ant-design-pro

【解决方案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>
)

如果您希望始终呈现级联，您还可以使用带有value 的受控组件。

Codesandbox

【讨论】：