Material UI Autocomplete RenderTags 不适用于 React Final Form mutator

Question

          <Autocomplete
              multiple
              id="tags-filled"
              options={tags} 
              freeSolo
              onChange={handleTagChange}
              renderTags={(value: string[], getTagProps) => {
                value.map((option: string, index: number) => {
                  // eslint-disable-next-line react/jsx-keyy
                  <Chip variant="outlined" label={option} {...getTagProps({ index })} />;
                  if (value !== values.metadata.keywordTags) {
                    setValue('metadata.keywordTags', value);
                  }
                });
              }}
              renderInput={(params) => (
                <TextField
                  {...params}
                  name={'metadata.keywordTags'}
                  variant="outlined"
                  label="Keyword tags (optional)"
                />
              )}
            />

onChange 在数组中设置不同的标签，渲染内部的 setValue() 是一个将标签的字符串数组添加到数据中的变异器。

组件在使用时，正确地将标签数组存储在数据中。 唯一的问题是芯片没有显示出来

我尝试过的：

         <Autocomplete
              multiple
              id="tags-filled"
              options={tags}
              freeSolo
              onChange={handleTagChange}
              renderTags={(value: string[], getTagProps) =>
                value.map((option: string, index: number) => (
                  // eslint-disable-next-line react/jsx-key
                  <Chip variant="outlined" label={option} {...getTagProps({ index })} />
                ))
              }
              renderInput={(params) => (
                <TextField
                  {...params}
                  name={'metadata.keywordTags'}
                  variant="outlined"
                  label="Keyword tags (optional)"
                />
              )}
            />

如您所见，我稍微修改了 renderTags（删除了一些大括号），并且 现在芯片可以工作了。

但是，只有最后一个标签被存储到数据中

我假设这是因为 TextField 组件中的 name={'metadata.keywordTags'} ？我可以做什么来显示芯片并获取数据中存储的正确标签数组？

Answer 1

在第一个版本中没有 return 语句。在第二个中，您隐式返回为一行