当 JSX 保存到状态时，选择 MenuItem 不显示

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

它必须是用于渲染的函数或数组。为了使您的代码正常工作，它应该是：

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

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

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

Answer 2

使用来自@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生命周期的一部分）然后通过以某种方式对渲染功能提出了内置问题。状态似乎是这样做的方法，但由于某种原因我不能使用 Select/MenuItems。