React Js，将新对象添加到数组中[重复]

Posted 2023-02-22

【中文标题】React Js，将新对象添加到数组中[重复]

【英文标题】：React Js, adding new object to an array [duplicate]

【发布时间】：2018-08-01 23:36:07

【问题描述】：

我有一个文本字段和一个单选按钮。

我正在制作这两个值的对象并将其放入一个数组中，以便我可以将其存储在 Mongo DB 中。

我正在构造一个对象数组并尝试迭代以在表格中显示详细信息。

无法显示详细信息。

为此需要帮助。

 export class AddColumns extends React.Component

  constructor(props) 
      super(props);
        this.state=
            newItemInput: '',
            selectedValue: '',
            buyItems :[],
            object : 
        
      

  handleChange=(event)=> 
    this.setState(
      ...this.state,
      selectedValue: event.target.value
    );
  ;

  change (event)
    this.setState(
      [event.target.name]:event.target.value
    );
  ;

addItem(e)
    e.preventDefault();

    const newItemInput = this.state.newItemInput;
    const newRadioValue = this.state.selectedValue;
    const obj = 'item':newItemInput, 'columnType':newRadioValue;
    this.state.buyItems.push(obj);
    console.log(this.state.buyItems);       
  

  render()
    const buyItems,message = this.state;
    return (
      <div className="container">
          <form className="form-inline" onSubmit=(e) => this.addItem(e)>
            <div className="form-group">
              <label className="sr-only" htmlFor="newItemInput">Add New Item</label>
              <input type ="text" ref =input => this.newColumn = input name="newItemInput" placeholder="Modules" value = this.state.newItemInput className="form-control" 
                      id="newItemInput" onChange=event => this.change(event)/>
            </div>

            <div className="k-form-field">
              <input type="radio" name="radio" value="radio1" className="k-radio" onChange=this.handleChange/>
              <label className="k-radio-label">RadioButton 1</label>

              <input type="radio" name="radio" value="radio2" className="k-radio" onChange=this.handleChange/>
              <label className="k-radio-label">RadioButton 2</label>

            <div className="form-group">
              <button type="submit" className="btn btn-primary">Add</button><p>this.state.messgae</p>
            </div>
          </form>
        <div className="content">
          <div>
                  
                    buyItems.map((rowdata,i) =>  
                        <div>
                          rowdata.item
                        </div>
                    )
                  
            </div>      
        </div>
      </div>
      );
  

【问题讨论】：

如何将对象数组迭代到表中？

【参考方案1】：

要更新视图，您必须调用 setState，而不仅仅是将项目推送到数组，您可以使用扩展语法轻松完成：

addItem(e)
    e.preventDefault();
    const newItemInput = this.state.newItemInput;
    const newRadioValue = this.state.selectedValue;
    const obj = 'item':newItemInput, 'columnType':newRadioValue;
    this.setState(
        buyItems: [...this.state.buyItems, obj]
    );
    console.log(this.state.buyItems);       

另一种方法是创建旧数组的副本，推送新项目并继续设置状态：

addItem(e)
    e.preventDefault();
    const newItemInput = this.state.newItemInput;
    const newRadioValue = this.state.selectedValue;
    const obj = 'item':newItemInput, 'columnType':newRadioValue;
    const newArray = this.state.buyItems.slice(); // Create a copy
    newArray.push(obj); // Push the object
    this.setState( buyItems: newArray );
    console.log(this.state.buyItems);       

【讨论】：

如何将对象数组迭代到表中

@mohan 如果仍有疑问，您应该考虑研究并提出一个新问题。这里有一些东西可以帮助您入门：***.com/questions/39137647/…