React js Multiple Select [object 对象], [object 对象]

Question

我正在使用 Material UI 来制作倍数 Select。这是我的代码。

  <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 中，但在屏幕上我看不到我选择的值，我只看到 [object Object]、[object Object]。

你知道为什么会这样吗？？

此致

Answer 1

问题似乎是缺少道具renderValue。 value 是所选值的列表，但 renderValue 函数给出了实际的渲染逻辑。通过这个额外的道具，它应该可以正常工作。

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

示例代码：

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

希望对您有所帮助。还原任何 doubts/clarifications.

React js Multiple Select [object 对象], [object 对象]

React js Multiple Select [object Object], [object Object]

javascript

multiple-select

reactjs

material-ui