多选择[对象对象]，[对象对象]

Question

我正在使用资料用户界面进行多重选择。这是我的密码。

  <TextField
        classes={{ root: classes.root }}
        select
        name="states"
        id="states"
        fullWidth
        label="states where you want to work" 
        SelectProps={{
          multiple: true,
          value: states.states,
          onChange: handleFieldChange
        }}
      >
        {listStates.map(col => (
              <MenuItem selected classes={{ selected: classes.selected }} key={col} value={col}>
                  <Checkbox checked={states.states.indexOf(col) > -1} />
                  <ListItemText primary={col} />
              </MenuItem>
            ))} 
      </TextField>

下面是handleFieldChange函数：

  const handleFieldChange = event => {
      event.persist();
      setStates(states => ({
        ...states,
        [event.target.name]:
          event.target.type === "checkbox"
            ? event.target.checked
            : event.target.value
      }));
    };

以下是一系列国家：

const listStates = [ "Aguascalientes", "Baja California", "Baja California Sur", "Campeche", "CDMX", "Coahuila de Zaragoza", "Colima", "Chiapas", "Chihuahua", "Durango", "Guanajuato", "Guerrero", "Hidalgo", "Jalisco", "EDOMEX", "Michoacán de Ocampo", "Morelos", "Nayarit", "Nuevo León", "Oaxaca", "Puebla", "Querétaro", "Quintana Roo", "San Luis Potosí", "Sinaloa", "Sonora",  "Tabasco",  "Tamaulipas",  "Tlaxcala", "Veracruz de Ignacio de la Llave", "Yucatán", "Zacatecas"];

一切都很好，值保存在useState中是正确的，但是在屏幕上我没有看到我选择的值，我只看到对象对象，对象对象。

你知道为什么会发生这种事吗？

问候

Answer 1

问题似乎是缺少道具renderValue。值是所选值的列表，但renderValue函数给出了实际的呈现逻辑。通过这个额外的道具，它应该工作得很好。

根据官方文件

renderValue是function(value: any) => ReactNode，其中的值--提供给组件的值。

样本代码：

SelectProps={{
  multiple: true,
  value: states.states,
  onChange: handleFieldChange,
  renderValue: (data) => <div>{data.join(", ")}</div>
}}

希望能帮上忙。回复任何疑问/澄清。