javascript - ReactJs - 迭代对象以创建表单字段

Question

我决定迭代一个数组并创建 Form.Field (semantic-ui)。这是我的静态代码，它的工作方式就像一个魅力:

export default class OrderChange extends Component<Props> {
    constructor() {
        super();
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }
    state = {}
    handleChange = (e, { value }) => this.setState({ value })
     render() {
                  <Form.Field>
                    <Radio
                      label='A'
                      name='radioGroup'
                      value='this'
                      checked={this.state.value === 'this'}
                      onChange={this.handleChange}
                    />
                  </Form.Field>
                  <Form.Field>
                    <Radio
                      label='B'
                      name='radioGroup'
                      value='this1'
                      checked={this.state.value === 'this1'}
                      onChange={this.handleChange}
                    />
                  </Form.Field>

    });

我正在致力于创建动态数据。首先，我创建了一个像这样的对象:

    const radios = [
        {
            name:'j',
            value:1
        },
        {
            name:'k',
            value:2
        }
    ];

然后，我尝试迭代它:

                {radios.map(function (radio, index) {
                    return (
                        <Form.Field>
                            <Radio
                                label={radio.name}
                                name='radioGroup'
                                value='this'
                                checked={this.state.value === radio.value}
                                onChange={this.handleChange}
                            />
                        </Form.Field>
                    );
                })}

但是，我遇到了这个错误:

Cannot read property 'state' of undefined

在这一行中:

 checked={this.state.value === radio.value}

有什么建议吗？

Answer 1

在您的情况下，state 声明为类属性，而不是实例属性。

 state = {} //class property will not available on this object

要么在构造函数中进行state声明

constructor() {
  this.state = {};   // now state available on this object
}

和checked={this.state.value === radio.value}将起作用

或从此处删除此。

checked={state.value === radio.value} // with class property state,it will work.