自动完成材质 UI getOptionSelected 警告答案

【问题标题】：AutoComplete Material UI getOptionSelcted warning自动完成材质 UI getOptionSelected 警告
【发布时间】：2021-04-27 21:48:23
【问题描述】：

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

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

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)

这是我的自动完成组件

<Autocomplete
  options={countryList}
  onBlur={handleBlur}
  value={
    countryList.filter((item) => {
      return item.countryId === values.countryId;
    })[0] || ""
  }
  getOptionSelected={(option, value) =>
    option.countryId === value.countryId
  }
  getOptionLabel={(option) =>
    option.countryName ? option.countryName : ""
  }
  onChange={(event, value) => {
    if (value) {
      setFieldValue("countryId", value.countryId);
    } else {
      setFieldValue("countryId", "");
    }
  }}
  id="countryId"
  name="countryId"
  renderInput={(params) => (
    <TextField {...params} label={"Country"} />
  )}
/>

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

虽然不是错误只是警告，但好像是在影响系统速度。

提前致谢

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

问题取决于您回退到""：

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 ""
}

【讨论】：