Пользовательский интерфейс материала Несколько объектов - PullRequest
Новая
       22

Пользовательский интерфейс материала Несколько объектов

0 голосов
/ 10 января 2020

Итак, у меня есть 2 фрагмента кода, один из которых работает. 

function UserSelect(props) {
    const context = useContext(ProjectsContext);
    const names = [
        'Oliver Hansen',
        'Van Henry',
        'April Tucker',
        'Ralph Hubbard',
        'Omar Alexander',
        'Carlos Abbott',
        'Miriam Wagner',
        'Bradley Wilkerson',
        'Virginia Andrews',
        'Kelly Snyder',
    ];

    const [state, setState] = useState(['Oliver Hansen']);

    return (
        <FormControl fullWidth={true}>
            <InputLabel>Users</InputLabel>
            <Select
                multiple
                value={state}
                onChange={(e) => setState(e.target.value)}
                input={<Input/>}
                renderValue={selected => {console.log(selected);}}
            >
                {names.map(name => (
                    <MenuItem key={name}
                              value={name}>
                        <Checkbox
                            checked={state.indexOf(name) > -1}/>
                        <ListItemText primary={name}/>
                    </MenuItem>
                ))}
            </Select>
        </FormControl>
    );
}

И этот, который не работает. 

function UserSelect(props) {
    const context = useContext(ProjectsContext);
    const names = [
        {name: 'hello'},
    ];

    const [state, setState] = useState([{name: 'hello'}]);

    return (
        <FormControl fullWidth={true}>
            <InputLabel>Users</InputLabel>
            <Select
                multiple
                value={state}
                onChange={(e) => {
                    setState(e.target.value);
                    console.log(e.target.value);
                }}
                input={<Input/>}
                renderValue={selected => selected.map(a => (a.name + ', '))}
            >
                {names.map(name => (
                    <MenuItem key={name.name}
                              value={name}>
                        <Checkbox
                            checked={state.map(a => {return a.name;}).indexOf(name.name) > -1}/>
                        <ListItemText primary={name.name}/>
                    </MenuItem>
                ))}
            </Select>
        </FormControl>
    );
}

Единственное отличие состоит в том, что я начал использовать массивы с объектами вместо строк. Действительно ли это ЭТО проблематично c для пользовательского интерфейса материала? Или скорее всего ... я что-то не так делаю?

Если кто-то знает больше об этой проблеме, пожалуйста, ответьте :) И если мы обнаружим опечатку или что-то еще, что мы все можем смеяться потом.

...