reactjs - 如何从自动完成复选框传递选定的项目？

Question

我想将选定的项目保存到文件中。为什么这段代码不起作用？这里有保存数据的功能：

 const onSubmitChecked = (selectedRoles, file) => {
    const fileData = JSON.stringify(selectedRoles);
    const blob = new Blob([fileData], { type: "text/plain" });
    const url = URL.createObjectURL(blob);
    const link = document.createElement("a");
    link.download = `${file}.json`;
    link.href = url;
    link.click();
  };

这里有复选框：

<AutoComplete
          multiple
          id="checkboxes-tags-demo"
          options={props.roles}
          disableCloseOnSelect
          getOptionLabel={(options) => `${options}`}
          renderOption={(options, { selected }) => (
            <React.Fragment>
              <Checkbox
                icon={icon}
                checkedIcon={checkedIcon}
                style={{ marginRight: 20 }}
                checked={selected}
              />
              {props.roles}
            </React.Fragment>
          )}
          style={{ width: 500 }}
          renderInput={(params) => (
            <TextField
              {...params}
              variant="outlined"
              label=""
              placeholder="Available Roles"
            />
          )}
        />
        <button type="submit" onClick={onSubmitChecked}>
          Save
        </button>

但是当我运行此代码时，出现以下错误：TypeError：将循环结构转换为 JSON --> 从带有构造函数“HT​​MLButtonElement”的对象开始 | 属性 '__reactFiber$l9vrne8ayg' -> 带有构造函数 'FiberNode' 的对象 --- 属性 'stateNode' 关闭了圆圈