自动完成材质 UI getOptionSelected 警告

时间:2021-01-23 16:57:06

标签: reactjs material-ui

我在 material-ui/lab 中使用自动完成组件 我所做的是检查用户是否已经定义了一个值。例如。用户可以在模态中编辑输入,然后用用户选择的选项预填充自动完成)

在这种情况下,我正在传递记录中的值,但它向我发出以下警告。

<configuration>
    <excludes>
        <exclude>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
        </exclude>
    </excludes>
</configuration>

这是我的自动完成组件

react_devtools_backend.js:2430 Material-UI: The value provided to Autocomplete is invalid.
None of the options match with `""`.
You can use the `getOptionSelected` prop to customize the equality test. 
    at Autocomplete (http://localhost:3000/static/js/0.chunk.js:165607:35)
    at WithStyles (http://localhost:3000/static/js/0.chunk.js:169077:31)
    at div
    at Grid (http://localhost:3000/static/js/0.chunk.js:7674:35)
    at WithStyles (http://localhost:3000/static/js/0.chunk.js:169077:31)
    at GridItem (http://localhost:3000/static/js/main.chunk.js:31989:24)
    at div
    at Grid (http://localhost:3000/static/js/0.chunk.js:7674:35)
    at WithStyles (http://localhost:3000/static/js/0.chunk.js:169077:31)
    at GridContainer (http://localhost:3000/static/js/main.chunk.js:31924:24)
    at div
    at CardBody (http://localhost:3000/static/js/main.chunk.js:31108:25)
    at div
    at Card (http://localhost:3000/static/js/main.chunk.js:30960:25)
    at form
    at Formik (http://localhost:3000/static/js/0.chunk.js:194461:19)
    at div
    at DialogContent (http://localhost:3000/static/js/0.chunk.js:4563:23)
    at WithStyles (http://localhost:3000/static/js/0.chunk.js:169077:31)
    at div
    at Paper (http://localhost:3000/static/js/0.chunk.js:14058:23)
    at WithStyles (http://localhost:3000/static/js/0.chunk.js:169077:31)
    at div
    at Transition (http://localhost:3000/static/js/0.chunk.js:257938:30)
    at Slide (http://localhost:3000/static/js/0.chunk.js:16624:24)
    at Transition
    at Unstable_TrapFocus (http://localhost:3000/static/js/0.chunk.js:21834:24)
    at div
    at Portal (http://localhost:3000/static/js/0.chunk.js:15142:24)
    at Modal (http://localhost:3000/static/js/0.chunk.js:12423:83)
    at Dialog (http://localhost:3000/static/js/0.chunk.js:4130:29)
    at WithStyles (http://localhost:3000/static/js/0.chunk.js:169077:31)
    at EducationEditModal (http://localhost:3000/static/js/main.chunk.js:46083:19)
    at ConnectFunction (http://localhost:3000/static/js/0.chunk.js:248523:75)
    at EducationSection (http://localhost:3000/static/js/main.chunk.js:47448:17)
    at ConnectFunction (http://localhost:3000/static/js/0.chunk.js:248523:75)
    at div
    at Grid (http://localhost:3000/static/js/0.chunk.js:7674:35)
    at WithStyles (http://localhost:3000/static/js/0.chunk.js:169077:31)
    at GridItem (http://localhost:3000/static/js/main.chunk.js:31989:24)
    at div
    at Grid (http://localhost:3000/static/js/0.chunk.js:7674:35)
    at WithStyles (http://localhost:3000/static/js/0.chunk.js:169077:31)
    at GridContainer (http://localhost:3000/static/js/main.chunk.js:31924:24)
    at div
    at div
    at div
    at ProfilePage (http://localhost:3000/static/js/main.chunk.js:43441:25)
    at ConnectFunction (http://localhost:3000/static/js/0.chunk.js:248523:75)
    at Route (http://localhost:3000/static/js/0.chunk.js:250658:29)
    at AuthRoute (http://localhost:3000/static/js/main.chunk.js:38633:28)
    at Switch (http://localhost:3000/static/js/0.chunk.js:250860:29)
    at Router (http://localhost:3000/static/js/0.chunk.js:250293:30)
    at App (http://localhost:3000/static/js/main.chunk.js:105:86)
    at PersistGate (http://localhost:3000/static/js/0.chunk.js:261313:5)
    at Provider (http://localhost:3000/static/js/0.chunk.js:248236:20)

问题是如何删除这个 getOptionSelected 警告。我正在使用 getOptionSelected 检查国家 ID 是否与选项匹配。

虽然不是错误,只是警告,但似乎影响了系统速度。

提前致谢

1 个答案:

答案 0 :(得分:0)

问题取决于您对 "" 的回退:

countryList.filter((item) => {
  return item.countryId === values.countryId;
})[0] || ""

您得到的错误是当值为 "" None of the options match with "" 时,因为它会尝试针对 getOptionSelected 运行 ""

getOptionSelected={(option, value) =>
  option.countryId === value.countryId // Here, option is ""
}