Выберите MenuItem не отображается, когда JSX сохраняется в состояние

Question

Работа с демо здесь: https://material -ui.com / demos / selects * и я получаю некоторые странные результаты.В частности, когда я выбираю элемент из выпадающего меню, this.props.value обновляется нормально ... но MenuItem не отображается.

Если я поместил тег <FormControl> непосредственно в рендер, онработает отлично.Если я добавляю переменную, то устанавливаю с этим setState и вставляю ее в рендер ... она НЕ работает.

Пример:

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import InputLabel from '@material-ui/core/InputLabel';
import MenuItem from '@material-ui/core/MenuItem';
import FormControl from '@material-ui/core/FormControl';
import Select from '@material-ui/core/Select';

const styles = theme => ({
    root: {
        display: 'flex',
        flexWrap: 'wrap',
    },
    formControl: {
        margin: theme.spacing.unit,
        minWidth: 120,
    },
    selectEmpty: {
        marginTop: theme.spacing.unit * 2,
    },
});

class Question extends React.Component {
    state = {
        age: '',
        age2: '',
        slct: ''
    };

    componentDidMount() {
        const { classes } = this.props;
        var mySelect =
            <FormControl className={classes.formControl}>
                <InputLabel htmlFor="age-simple">Age</InputLabel>
                <Select
                    value={this.state.age}
                    onChange={this.handleChange}
                    inputProps={{
                        name: 'age',
                        id: 'age-simple',
                    }}
                >
                    <MenuItem value="">
                        <em>None</em>
                    </MenuItem>
                    <MenuItem value={10}>Ten</MenuItem>
                    <MenuItem value={20}>Twenty</MenuItem>
                    <MenuItem value={30}>Thirty</MenuItem>
                </Select>
            </FormControl>
        this.setState({ slct: mySelect });
    }

    handleChange = event => {
        this.setState({ [event.target.name]: event.target.value });
    };


    render() {
        const { classes } = this.props;
        return (
            <div>
                {this.state.slct}
                <p>Value:</p>{this.state.age}

                <FormControl className={classes.formControl}>
                    <InputLabel htmlFor="age-simple2">Age</InputLabel>
                    <Select
                        value={this.state.age2}
                        onChange={this.handleChange}
                        inputProps={{
                            name: 'age2',
                            id: 'age-simple2',
                        }}
                    >
                        <MenuItem value="">
                            <em>None</em>
                        </MenuItem>
                        <MenuItem value={10}>Ten</MenuItem>
                        <MenuItem value={20}>Twenty</MenuItem>
                        <MenuItem value={30}>Thirty</MenuItem>
                    </Select>
                </FormControl>
                <p>Value:</p>{this.state.age2}

            </div>
        );
    }
}

export default withStyles(styles)(Question);

Вы можете увидеть, как значение ''корректно обновляется для обоих в зависимости от того, какой ответ я выбрал в раскрывающемся списке ... но визуально метка MenuItem никогда не отображается для той, которая исходит из состояния:

Помощь?

(к вашему сведению: эти предметы есть у родителей <form>.)

Answer 1

Используя информацию @Jee Mok ... идея о том, что она может работать как функция (даже если другие элементы, кажется, не заботятся), заставила меня попробовать следующие изменения в исходном коде:

Добавлена ​​эта функция:

selectRenderer() {
        const { classes } = this.props;
        return (
        <FormControl className={classes.formControl}>
            <InputLabel htmlFor="age-simple">Age</InputLabel>
            <Select
                value={this.state.age}
                onChange={this.handleChange}
                inputProps={{
                    name: 'age',
                    id: 'age-simple',
                }}
            >
                <MenuItem value="">
                    <em>None</em>
                </MenuItem>
                <MenuItem value={10}>Ten</MenuItem>
                <MenuItem value={20}>Twenty</MenuItem>
                <MenuItem value={30}>Thirty</MenuItem>
            </Select>
        </FormControl>
        );
    };

А затем в функции рендеринга компонента я вызываю ее:

render() {
    return (
        <div>
            {this.selectRenderer()}
            <p>Value:</p>{this.state.age}
        </div>
    );
}

Это работает.(и поэтому я отмечу, что он ответил через два дня)

Мне любопытно, однако, ПОЧЕМУ этот конкретный кусок JSX должен быть введен как функция, тогда как другие фрагменты JSX этого не делают.(в частности, текстовое поле material-ui прекрасно работает, будучи назначенным для состояния, как я делал в OP) Я хотел бы иметь возможность один раз создать этот вопрос (предпочтительно как часть жизненного цикла componentDidMount), а затем передатьвстроенный вопрос как-то к функции рендера.State, кажется, способ сделать это, но я не могу с Select / MenuItems по какой-то причине.

Answer 2

это должна быть функция или массив для рендеринга.Чтобы ваш код работал, он должен быть:

  state = {
    slct: <FormControl>...</FormControl>
  }

  slctRenderer = () => this.state.slct;

  render() {
    return (
      <div>
        {this.slctRenderer()}
      </div>
    );
  }