问题

我正在使用Material UI的Autocomplete组件与Next.js，收到了一个警告，尝试解决但未成功。这个错误来自于renderInput函数吗？如果是的话，在“...params”中没有“key”属性，所以我无法像警告消息建议的那样移除它。

我该如何修复这个问题？

```javascript
const top100Films = ['a', 'b', 'c', 'd'];

// props.tags = ['a', 'c']

<Autocomplete
  multiple
  id="tags-outlined"
  onChange={(event: any, newValue: string[]) => {
    props.onTagsChange(newValue);
  }}
  options={top100Films}
  value={props.tags}
  filterSelectedOptions
  renderInput={(params) => (
    <TextField
      {...params}
      label="Tags"
      placeholder="Tag"
    />
  )}
/>

hydration-error-info.js?32aa:26 警告：包含“key”属性的props对象正在扩展到JSX中：
  let props = {key: someKey, tabIndex: ..., role: ..., id: ..., onMouseOver: ..., onClick: ..., onTouchStart: ..., data-option-index: ..., aria-disabled: ..., aria-selected: ..., className: ..., children: ...};
  <li {...props} />
React的key必须直接传递给JSX，不能使用扩展：
  let props = {tabIndex: ..., role: ..., id: ..., onMouseOver: ..., onClick: ..., onTouchStart: ..., data-option-index: ..., aria-disabled: ..., aria-selected: ..., className: ..., children: ...};
  <li key={someKey} {...props} />

<details>
<summary>英文:</summary>

So I am using the Material UI Autocomplete component with Next.js, and receiving this warning that I tried to resolve but could not.  Is the error from renderInput function? If so there is no &quot;key&quot; property in &quot;...params&quot; , so I can not remove like the warning message suggest.

How I can fix this?

    const top100Films = [&#39;a&#39;, &#39;b&#39;, &#39;c&#39;, &#39;d&#39;];
    
    // props.tags = [&#39;a&#39;, &#39;c&#39;]
    
    &lt;Autocomplete
      multiple
      id=&quot;tags-outlined&quot;
      onChange={(event: any, newValue: string[]) =&gt; {
        props.onTagsChange(newValue);
      }}
      options={top100Films}
      value={props.tags}
      filterSelectedOptions
      renderInput={(params) =&gt; (
        &lt;TextField
          {...params}
          label=&quot;Tags&quot;
          placeholder=&quot;Tag&quot;
        /&gt;
      )}
    /&gt;

[![enter image description here][1]][1]

hydration-error-info.js?32aa:26 Warning: A props object containing a "key" prop is being spread into JSX:
let props = {key: someKey, tabIndex: ..., role: ..., id: ..., onMouseOver: ..., onClick: ..., onTouchStart: ..., data-option-index: ..., aria-disabled: ..., aria-selected: ..., className: ..., children: ...};
<li {...props} />
React keys must be passed directly to JSX without using spread:
let props = {tabIndex: ..., role: ..., id: ..., onMouseOver: ..., onClick: ..., onTouchStart: ..., data-option-index: ..., aria-disabled: ..., aria-selected: ..., className: ..., children: ...};
<li key={someKey} {...props} />

  [1]: https://i.stack.imgur.com/n4idN.png

</details>


# 答案1
**得分**: 15

以下是翻译好的内容：

问题出在于 nextjs 如何渲染其组件。具体来说，这是因为在 `Autocomplete` 组件中对选项和标签列表设置了不正确的 `key`。虽然有点繁琐，但你必须明确地指定标签和选项的键，如下所示。

你可以使用 `Autocomplete` 提供的 `renderOption` 和 `renderTags` 来解决这个问题。

```jsx
renderOption={(props, option) => {
  return (
    <li {...props} key={option}>
      {option.label}
    </li>
  );
}}

以及

renderTags={(tagValue, getTagProps) => {
  return tagValue.map((option, index) => (
    <Chip {...getTagProps({ index })} key={option} label={option} />
  ))
}}

所以... 在你的情况下，它会变成：

<Autocomplete
  multiple
  id="tags-outlined"
  options={top100Films}
  onChange={(event, newValue) => {
    props.onTagsChange(newValue);
  }}
  value={props.tags}
  filterSelectedOptions
  renderOption={(props, option) => {
    return (
      <li {...props} key={option}>
        {option}
      </li>
    )
  }}
  renderTags={(tagValue, getTagProps) => {
    return tagValue.map((option, index) => (
      <Chip {...getTagProps({ index })} key={option} label={option} />
    ))
  }}
  renderInput={(params) => (
    <TextField
      {...params}
      label="Tags"
      placeholder="Tag"
    />
  )}
/>

你可以在 这里 阅读更多关于 renderOption 和 renderTags 的信息。

PS. 别忘了从 Mui 中导入 Chip！

  renderOption={(props, option) => {
    return (
      <li {...props} key={option}>
        {option.label}
      </li>
    );
  }}

    renderTags={(tagValue, getTagProps) => {
      return tagValue.map((option, index) => (
        <Chip {...getTagProps({ index })} key={option} label={option} />
      ))
    }}

  <Autocomplete
    multiple
    id="tags-outlined"
    options={top100Films}
    onChange={(event: any, newValue: string[]) => {
      props.onTagsChange(newValue);
    }}
    value={props.tags}
    filterSelectedOptions
    renderOption={(props, option) => {
      return (
        <li {...props} key={option}>
          {option}
        </li>
      )
    }}
    renderTags={(tagValue, getTagProps) => {
      return tagValue.map((option, index) => (
        <Chip {...getTagProps({ index })} key={option} label={option} />
      ))
    }}
    renderInput={(params) => (
      <TextField
        {...params}
        label="Tags"
        placeholder="Tag"
      />
    )}
  />

答案2

得分: -3

你在Textfield标签中传递props的方式如下：

    <TextField
      {...params}
      label="标签"
      placeholder="标签"
    />
    
尝试以以下方式在Textfield标签中传递props：

     <TextField
          props={params}
          label="标签"
          placeholder="标签"
        />

<TextField
  {...params}
  label="Tags"
  placeholder="Tag"
/>

 <TextField
      props={params}
      label="Tags"
      placeholder="Tag"
    />