Question

我有以下数组

arrayOfItems: [{
0:  
    description: "item1"
    id: 11
    name: "item1Name"   
},
1:  
    description: "item2"
    id: 12
    name: "item2Name"   
},
2:  
    description: "item3"
    id: 13
    name: "item3Name"   
},
3:  
    description: "item4"
    id: 14
    name: "item4Name"   
}]

我想添加一对新的

{   
    description: "item5"
    id: 15
    name: "item5Name"   
}

我对React还是很陌生，并且一直在解决这个问题。我确实了解Map的工作原理，但不确定如何在React中添加新的配对

此组件是一个下拉列表，因此没有与之相关的输入或按钮单击。

{dataArray.arrayOfItems!.map((item: any) => {
return (
  <ComponentName key={item.id} value={item.description}>
    {item.description}
  </ComponentName>
);
})}

Answer 1

将更改事件添加到下拉菜单中。

onChange = (event) => {
  console.log(event.target.value)
  // add your value to array here
  this.setState((prevState) => {
    arrayOfItems: [...prevState.arrayOfItems, yourItem],
  })
}

<select onChange={this.onChange}>
</select>

编辑

在页面加载时添加值。不要使用push将状态项添加到数组中。

componentDidMount = () => {
  this.setState((prevState) => {
    arrayOfItems: [...prevState.arrayOfItems, yourItem],
  })
}

Answer 2

如果要在页面加载时将项目添加到数组，请使用componentDidMount()方法：

class List extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      items:[
       {id:1,name:'aaa', description:'this is description aaa'},
       {id:2,name:'bbb', description:'this is description bbb'},
      ]
    }
  }

  componentDidMount(){
       let items=this.state.items;
       let newItem={id:5,name:'ccc',description:'this is description ccc'};
       let updatedItems=items.push(newItem);
        // or you can use ... spread operator
       // let updatedItems=[...items,newItem];
       this.setState({items:updatedItems});
  }


}

Answer 3

与map无关，您需要将组件的状态保存为项目状态，以便可以在添加新项目时对其进行更新。

class ParentComponent extends Component {
  state = {
    items: [] // save your items to state
  };

  // however you're loading this new item
  loadMoreItems = () => {
    const newItem = {}; // item to be added
    setState({
      // add this item to the items already exists
      items: [...this.state.items, newItem]
    });
  };

  render() {
    const { items } = this.state;
    return (
      <Container>
        {items.map(item => (
          <ComponentName key={item.id} value={item.description}>
            {item.description}
          </ComponentName>
        ))}
      </Container>
    );
  }
}

如何在React中使用map向数组添加值

3 个答案: