如何在React中创建动态状态名称？

Question

在React中，我试图在映射中创建动态状态名称。

这是构造函数状态

 this.state = {
   d1: [{
     startTime: '',
     endTime: '',
     location: ''
   }],
   d2: [{
     startTime: '',
     endTime: '',
     location: ''
   }],
   d3: [{
     startTime: '',
     endTime: '',
     location: ''
   }]
 }

在我的应用中，用户可以生成一个新列以为相同的州名输入更多数据。

在creatForm（）中，我传递了1,2和3的天数来生成不同的列，但是'this.state.d.map（（el，i）=>'）不起作用正确地

creatForm(x) {
    const d = `d${x}`;
    const day = `DAY${x}`;
    return this.state.d.map((el, i) => (
      <div key={i}>
        <Form>
          <Form.Group inline>
            <Form.Field>
              <label>
                <h4>{day}</h4>
              </label>
              <Input
                name="startTime"
                value={el.startTime || ''}
                onChange={this.handleChange.bind(this, i, d)}
              />
            </Form.Field>
            <Form.Field>
              <Input
                name="endTime"
                value={el.endTime || ''}
                onChange={this.handleChange.bind(this, i, d)}
              />
            </Form.Field>
            <Form.Field>
              <Input
                name="location"
                value={el.location || ''}
                onChange={this.handleChange.bind(this, i, d)}
              />
              <Button
                icon="plus"
                inverted
                color="blue"
                onClick={this.addClick(d)}
              />
              <Button
                icon="minus"
                inverted
                color="blue"
                onClick={this.removeClick(d)}
              />

              {this.showMinus(i)}
            </Form.Field>
          </Form.Group>
        </Form>
      </div>
    ));
  }

  render() {
    return (
      <div>
        {this.creatForm(1)}
        {this.creatForm(2)}
      </div>
    );
  }

sceenshot UI-https://imgur.com/wl4ZBYp

我正在使用函数来处理输入（已正确绑定到this），我希望可以传递参数以指示输入的不同状态。 d = 1,2,3

  handleChange(i, e, d) {
    const { name, value } = e.target;
    const d = [...this.state.d];
    d[i] = { ...d[i], [name]: value };
    this.setState({
      d
    });
  }

  addClick(d) {
    this.setState((prevState) => ({
      d: [
        ...prevState.d,
        {
          startTime: '',
          endTime: '',
          location: ''
        }
      ]
    }));
  }

  handleSave(d) {
    console.log(this.state.d1);
  }

  removeClick(d) {
    const d = [...this.state.d];
    d.splice(i, 1);
    this.setState({
      d
    });
  }