Material UI Select 组件抛出 javascript 控制台警告答案

【问题标题】：Material UI Select component throwing javascript console warningMaterial UI Select 组件抛出 javascript 控制台警告
【发布时间】：2021-03-27 09:33:23
【问题描述】：

我正在使用带有值的选择组件，方法是使用下面的 useEffect 设置它们。

useEffect(()=>{
    const {property, properties} = props;
    setProperties(properties); // properties is an array of values 
    ['somevalue1', 'somevalue2']
     setProperty(property)
},[props])

但这会导致以下 javascript 警告。我猜这是因为首先设置属性而不是属性数组的竞争条件。有什么提示可以避免警告？

您为选择组件提供了超出范围的值somevalue1。考虑提供与可用选项之一或“”匹配的值。可用值为 ""。

下面是我正在使用的选择代码。

<Select
    value={property}
    onChange={onChange}
    input={<BootstrapInput />}
    defaultValue=""
>
    {Object.keys(properties).map((key) => (
        <MenuItem key={key} value={key}>
            {key}
        </MenuItem>
    ))}
</Select>

【问题讨论】：

标签： material-ui

【解决方案1】：

为什么要在 useEffect 中设置状态值？如果您没有具体原因，请尝试像下面的代码一样修改它。

const [properties, setProperties] = useState(props.properties);
const [preperty, setProperty] useState(props.property)

而且你问的代码似乎有无限重复的可能。

【讨论】：

嗨，对于我的页面的初始流程，是的，我正在使用 useState，它可以正常工作。但是我的页面有后退按钮功能，我需要在其中呈现以前的状态，因此所有以前的状态值都来自道具。所以我别无选择，只能使用 useEffect()。关于您的无限循环语句，我不同意，因为我的代码中的 useEffect 仅在道具更改时运行。