来自状态的 React Ant Design defaultValue 不起作用

Question

我正在关注 Ant 的 react official docs 设计，他们在内联选择元素中硬编码了默认值：

defaultValue={['a10', 'c12']}

我正在尝试使用与反应状态完全相同的值，但它根本没有显示出来。如果我使用 value 而不是 defaultValue 那么它（与状态相同的值）会显示但它不可编辑，因此使用 value 不是一个选项。

所以基本上我必须使用defaultValue，如文档中所示，但我对它根本不渲染感到非常惊讶。但是，如果我对完全相同的数据进行硬编码 ['a10', 'c12'] 它工作正常！这里有什么问题？有人遇到过这样的问题吗？

请看下面的截图。谢谢。

屏幕截图 1. 在状态中硬编码的值并且有效，选择字段已填充

屏幕截图 2. 尝试使用 useEffect 更新状态（最终此数据将来自 API）而不是硬编码，但它没有出现在选择字段中。但是您可以在JSON.stringify() 中看到状态中的值

屏幕截图 3。这就是我使用 defaultValue 的方式，如文档中所示

Answer 1

useEffect 通常在组件安装/更新后运行。 defaultValue 仅用于组件的初始渲染。因此，在您的情况 1 中，状态是硬编码的，因为在输入的（选择）初始渲染期间提供了默认值，所以该值显示出来。

在useEffect 中更新状态的情况下，状态不会反映，因为输入的初始渲染已经完成，并且在此之后将不会使用 defaultValue 用于特定输入。如果您需要状态来控制输入（选择）的值，请尝试将 value 传递给 Input 而不是 defaultValue。这使得组件被控制。