Error: Objects are not valid as a React child - Location of Error?

Question

我收到这个错误

Error: Objects are not valid as a React child (found: object with keys {class, major}). If you meant to render a collection of children, use an array instead.

根据错误和我在此处阅读的内容，我知道我需要使用数组，或者听起来像 .map 可能也有帮助。我的问题是我到底需要在哪里进行更改？

  const CSclasses = [
    {class: 'CS 101', major: 'CS'},
    {class: 'CS 191', major: 'CS'},
    {class: 'CS 201R', major: 'CS'},
    {class: 'CS 291', major: 'CS'},
    {class: 'CS 303', major: 'CS'},
    {class: 'CS 320', major: 'CS'},
    {class: 'CS 349', major: 'CS'},
    {class: 'CS 349R', major: 'CS'},
    {class: 'CS 404', major: 'CS'},
    {class: 'CS 441', major: 'CS'},
    {class: 'CS 449', major: 'CS'},
    {class: 'CS 456', major: 'CS'},
    {class: 'CS 457', major: 'CS'},
    {class: 'CS 458', major: 'CS'},
    {class: 'CS 461', major: 'CS'},
    {class: 'CS 465R', major: 'CS'},
    {class: 'CS 470', major: 'CS'},
    {class: 'CS 5520', major: 'CS'},
    {class: 'CS 5525', major: 'CS'},
    {class: 'CS 5552A', major: 'CS'},
    {class: 'CS 5565', major: 'CS'},
    {class: 'CS 5573', major: 'CS'},
    {class: 'CS 5590PA', major: 'CS'},
    {class: 'CS 5592', major: 'CS'},
    {class: 'CS 5596A', major: 'CS'},
    {class: 'CS 5596B', major: 'CS'},
  ]

        <Autocomplete
          multiple
          id="manage-CS-classes"
          options={CSclasses}
          disableCloseOnSelect
          getOptionsLabel={(option) => option.class}
          renderOption={(props, option, { selected }) => (
            <li {...props}>
              <Checkbox
                icon={icon}
                checkedIcon={checkedIcon}
                style={{ marginRight: 8 }}
                checked={selected}
              />
              {option.class}
            </li>
          )}
          style={{ width: 500 }}
          renderInput={(params) => (
            <TextField {...params} label="CS Classes" placerholder="Added Classes" />
          )}
          />

Answer 1

您需要设置getOptionLabel以识别哪个属性是标签字段

getOptionLabel={option => option.class}

我正在使用 class 属性作为您案例的标签字段

<Autocomplete
          multiple
          id="manage-CS-classes"
          options={CSclasses}
          getOptionLabel={option => option.class}
          disableCloseOnSelect
          getOptionsLabel={(option) => option.class}
          renderOption={(props, option, { selected }) => (
            <li {...props}>
              <Checkbox
                icon={icon}
                checkedIcon={checkedIcon}
                style={{ marginRight: 8 }}
                checked={selected}
              />
              {option.class}
            </li>
          )}
          style={{ width: 500 }}
          renderInput={(params) => (
            <TextField {...params} label="CS Classes" placerholder="Added Classes" />
          )}
          />

Error: Objects are not valid as a React child - Location of Error?

Error: Objects are not valid as a React child - Location of Error?

arrays

children

reactjs

material-ui

next.js