Question

我正在尝试在reactjs中创建一个对象数组。

我在状态中定义了数据：

this.state ={
   data:[]
}

我有两个下拉菜单，在更改下拉菜单值时，这些值是从一个csv文件填充的。

像 dropdown1 一样，我得到了[1,2,3,4,5]，而 dropdown2 则得到了[10,20,30,40,50]，现在我想以以下格式添加这些值： setState使用数据（处于状态）：

data:[
   {"x":1,"y":10},{"x":2,"y":20},{"x":3,"y":30},{"x":4,"y":40},{"x":5,"y":50}
]

每个下拉菜单都有两个handleChange函数。

Answer 1

您可以使用类似这样的内容：

dropDownChange1(e) => {
  this.setState({
     x: e.target.value
  });
}
dropDownChange2(e) => {
  this.setState({
     y: e.target.value
  });
}

假设您有一个Add button，其中有一个onClick function，可以将这些值添加到data Array

addMyValues() => {
  let obj = {
   "x": this.state.x, "y": this.state.y
  }
  let myArray = this.state.data;
  myArray.push(obj);
  this.setState({data : myArray});
}

希望这会有所帮助。只是一个不起眼的请求，下次您提出问题时，请尝试提供包括html标记的整个代码。这样可以轻松帮助您理解问题。

请告诉我上面的代码是否有帮助。

Answer 2

目前，我不知道如何获取Dropdown1和Dropdown2的数据，但是从下面的示例中，我们假设您已经在state内保存了数据：

this.state = {
  data: [],
  firstDropdown: [1, 2, 3, 4, 5],
  secondDropdown: [10, 20, 30, 40, 50],
}

注意：两个下拉列表 长度相同！

要填充Data Array，请使用React ComponentDidMount lifecycle method：

ComponentDidMount() {
  const { firstDropdown, secondDropdown } = this.state;
  this.setState({
    data: firstDropdown.map((x, i) => ({ x, y: secondDropdown[i] }))
  })
}

ComponentDidMount是放置呼叫以获取数据的最佳位置。

完整示例：

class Test extends React.Component { constructor(props) { super(props); this.state = { data: [], firstDropdown: [1, 2, 3, 4, 5], secondDropdown: [10, 20, 30, 40, 50], }; } componentDidMount() { const { firstDropdown, secondDropdown } = this.state; this.setState({ data: firstDropdown.map((x, i) => ({ x, y: secondDropdown[i] })), }) } handleChangeFirst = e => { console.log("First", e.target.value) } handleChangeSecond = e => { console.log("Second", e.target.value) } render() { return ( <div> <p>First</p> <select onChange={this.handleChangeFirst}> {this.state.firstDropdown.map(x => <option key={x} value={x}>{x}</option>)} </select> <p>Second</p> <select onChange={this.handleChangeSecond}> {this.state.secondDropdown.map(x => <option key={x} value={x}>{x}</option>)} </select> <h4>Data state</h4> <pre> {JSON.stringify(this.state.data, null, 2)} </pre> </div> ); } } ReactDOM.render( <Test />, document.getElementById('app') );

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.9/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/0.14.9/react-dom.min.js"></script> <div id="app"></div>

有用的链接：Official React Documentation。

如何在数组中添加对象

2 个答案: