Javascript TypeError:无法读取属性'；价值观'；Reactjs中未定义的

我的反应不是很熟练。我正在使用一个动态表单，用户应该能够动态地添加和删除输入字段。但是，我无法将输入动态保存到变量中

代码：

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
值：[]，
类型：[]，
名称：“”，
频率：''，
};
} 
handleMetric（i，事件）{
让value=[…this.state.values]；
值[i]=event.target.value；
this.setState（{values}）；
log（“度量：”）
console.log（值）
}
handleThreshold（i，事件）{
让value=[…this.state.values]；
值[i]=event.target.value；
this.setState（{values}）；
log（“阈值：”）
console.log（值）
}
addClick（）{
this.setState（prevState=>（{values:[…prevState.values，']}））
}
removeClick（一）{
让value=[…this.state.values]；
值。拼接（i，1）；
this.setState（{values}）；
}
createUI（）{
返回此.state.values.map（（el，i）=>
)
}
render（）{
返回(
{this.createUI（）}
);
}
}
导出默认应用程序

HandletThreshold和handleMetric函数均不工作，并出现以下错误：

---

在动态获取存储在数组中的变量时，非常感谢您的帮助。

将类方法转换为带有箭头函数的类属性初始值设定项，因此

此

始终是组件实例：

handleMetric=（i，事件）=>{
让value=[…this.state.values]；
值[i]=event.target.value；
this.setState（{values}）；
log（“度量：”）
console.log（值）
};
handleThreshold=（i，事件）=>{
让value=[…this.state.values]；
值[i]=event.target.value；
this.setState（{values}）；
log（“阈值：”）
console.log（值）
};

---

您通过在

render

方法中执行

this.addClick.bind（this）

解决了另一个回调的问题。这两种方法都有效。执行箭头函数声明意味着在组件的生命周期中只创建一个函数，而

渲染中的
.bind
意味着每次调用
渲染时都会创建一个函数。这可能对你的应用程序没有什么可识别的性能改变，但还是要考虑的。
谢谢，但是它不起作用。我在
values[I]=event.target.value这一行上得到一个错误你现在在那一行上遇到了什么错误？我得到了与以前相同的错误“值未定义”，但我现在已经让它工作了，无论如何谢谢你！

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      values: [],
      type:[],
      name: '',
      frequency: '',
    };
  } 

  handleMetric(i, event) {
     let values = [...this.state.values];
     values[i] = event.target.value;
     this.setState({ values });
     console.log("Metrics: ")
     console.log(values) 
  }

  handleThreshold(i, event) {
    let values = [...this.state.values];
    values[i] = event.target.value;
    this.setState({ values });
    console.log("Threshold: ")
     console.log(values) 
  }

  addClick(){
    this.setState(prevState => ({ values: [...prevState.values, '']}))
  }
  
  removeClick(i){
     let values = [...this.state.values];
     values.splice(i,1);
     this.setState({ values });
  }

  createUI(){
    return this.state.values.map((el, i) => 
        <div key={i}>
         <input type="text" value={el||''} onChange={this.handleChange.bind(this, i)} />
         <input type='button' value='remove' onClick={this.removeClick.bind(this, i)}/>
        </div>          
    )
 }
  
  render() {

    return (
    <div> 
       <div className="card">
          <form onSubmit={this.handleSubmit}>
         
              <Form.Item name="Type of metrics" label="Metric" htmlFor="type">
                <Select
                  value={Select}
                  onChange={this.handleMetric}
                  options={metrics}
                />
              </Form.Item>

              <Form.Item name="amount" label="Threshold Score" htmlFor="threshold">
                <Slider marks={marks} name="threshold" onChange={this.handleThreshold} />
              </Form.Item>

            </Form>

            {this.createUI()}  

            <input type='button' value='add more' onClick={this.addClick.bind(this)}/>
            <input type="submit" value="Submit" />

          </form>
        </div>
      </div>
    );
  }
}

export default App