Material UI Autocomplete设置值报React子元素渲染错误的解决方法

报错触发原因 #

出现Objects are not valid as a React child报错，本质是两处逻辑错位：

• 取值逻辑不符合组件API规范：Material UI的Autocomplete和原生表单组件的回调参数不同，仅从事件对象的target.value取值，根本拿不到完整的选中选项，最终把普通对象作为可渲染子节点传入DOM，触发React渲染异常。
• 状态与组件未建立受控联动：仅随意调用setState更新值，没有把状态和Autocomplete的value属性绑定，组件无法正确识别选中状态，渲染流程出错。

正确设置选中值的操作步骤 #

• 状态初始化匹配选项结构
  如果传入options的元素是对象结构（比如包含电影标题、上映年份的条目），状态初始值设为null即可，不要传入结构不匹配的初始值。
• 正确读取回调返回的选中值
  Autocomplete的onChange回调第二个参数就是用户最终选中的完整选项，直接将该参数存入状态即可。无需从event.target.value取值——Autocomplete内部input的value仅存储匹配的展示文本，不存完整的选项对象。
• 绑定受控属性实现状态同步
  将存入状态的选中值传给Autocomplete的value属性，组件会自动完成选中态的回显，不管是手动选择还是代码修改状态，都能保持显示一致。
• 不绕过组件逻辑向TextField传对象值
  Autocomplete会根据配置的getOptionLabel方法，自动从选中对象中提取需要展示的文本传给内部渲染的TextField；手动将对象值塞给TextField，会直接触发渲染报错。

修正后的代码示例 #

// 状态初始值为null，匹配对象类选项的结构
const [selectedFilm, setSelectedFilm] = useState(null);

return (
  <div className={classes.root}>
    <Autocomplete
      id="size-small-standard"
      // 读取onChange第二个参数作为选中值
      onChange={(event, selectedValue) => {
        setSelectedFilm(selectedValue);
      }}
      // 绑定受控值，实现选中态双向同步
      value={selectedFilm}
      size="small"
      options={top100Films}
      getOptionLabel={(option) => option.title}
      defaultValue={top100Films[13]}
      renderInput={(params) => (
        <TextField
          {...params}
          variant="standard"
          label="Size small"
          placeholder="Favorites"
        />
      )}
    />
  </div>
);

实用注意事项 #

• 如果选项是字符串、数字这类原始值，直接将原始值存入状态即可，配合getOptionLabel返回option本身就能正常渲染，不会触发对象渲染报错。
• 重置选中值时，直接将状态设为null即可，无需手动修改TextField的内部状态。
• 如果需要获取用户手动输入的实时文本，不要和onChange的选中值混淆，要通过Autocomplete的onInputChange回调读取实时输入内容。

内容的提问来源于stack exchange，提问作者Pranav