Reactjs 如何通过循环设置数据数组，以便使用react访问组件？

我有这样的问题。我制作了一个组件并创建了一个componentDidMount方法来访问一些数据

这是我的组件

import React,{ Component } from 'react';
import { Button, Form, Grid, Message,Card } from 'semantic-ui-react';
import BodyBackgroundColor from 'react-body-backgroundcolor';

import web3 from '../ethereum/web3';
import trafficfine from '../ethereum/trafficfine';

import Layout from './Layout';
import Header from './Header';


export default class Officerreg extends Component {
  state ={
    firstname: '',
    lastname: '',
    officer: 0,
    officers:[]
  };

  async componentDidMount(){
    const officerCount = await trafficfine.methods.getofficerCount().call();
    for(let i=0;i<officerCount;i++){
      var officer={
        firstname:'',
        lastname:'',
        address:0
      }

      const officers = await trafficfine.methods.getNthOfficerName(i).call();
      officer.firstname=officers[0];
      officer.lastname=officers[1];
      officer.address=officers[2];
      this.setState({officers:officer});
    }

    console.log(this.state.officers);
  }

  onSubmit = async (event) =>{
    event.preventDefault();
    this.setState({ loading: true, errorMessage: ''});

    try{
      const accounts = await web3.eth.getAccounts();

      await trafficfine.methods.addOfficer(this.state.firstname,this.state.lastname,this.state.officer)
        .send({
          from: accounts[0]
        });

    }catch(err){
      this.setState({ errorMessage: err.message})
    }

    this.setState({ loading: false});
  }
    render(){
        return(
          <BodyBackgroundColor backgroundColor='#e9ebee'>
          <div >
          <Header></Header>
          <Layout style={{paddingTop:'100px'}}>
            <Grid>
              <Grid.Row>
              <Grid.Column width={10}>
                <Card style={{paddingTop:'40px',paddingBottom:'40px',paddingLeft:'50px',paddingRight:'50px',width:'2000px',marginTop:'40px',boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)'}}>
                    <h2>Officers</h2>
                </Card>
              </Grid.Column>
              <Grid.Column width={6}>
            <Card style={{paddingTop:'40px',paddingBottom:'40px',paddingLeft:'50px',paddingRight:'50px',width:'1500px',marginTop:'40px',boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)'}}>
           <Form onSubmit={this.onSubmit} error={!!this.state.errorMessage}>
             <center><h3>Add Officer</h3></center>
              <Form.Field>
                <label>First Name</label>
                <input placeholder='Sunil'  value={this.state.firstname}
                        onChange ={event => this.setState({ firstname: event.target.value})} />
              </Form.Field>
              <Form.Field>
                <label>Last Name</label>
                <input placeholder='Bandara'  value={this.state.lastname}
                        onChange ={event => this.setState({ lastname: event.target.value})}/>
              </Form.Field>
              <Form.Field>
                <label>Address Of the officer</label>
                <input placeholder='Car'  value={this.state.officer}
                        onChange ={event => this.setState({ officer: event.target.value})}/>
              </Form.Field>
              <Message error header="Oops!" content={this.state.errorMessage} />
                    <Button loading={this.state.loading} color="green" basic>Add Officer</Button> <Button  loading={this.state.loading} color="red" basic >Clear</Button>
            </Form>
            </Card>
            </Grid.Column>
            </Grid.Row>
            </Grid>
            </Layout>

            </div>
            </BodyBackgroundColor>

        )
    }
}

import React，{Component}来自'React'；
从“语义ui react”导入{按钮、表单、网格、消息、卡片}；
从“react body backgroundcolor”导入BodyBackgroundColor；
从“../ethereum/web3”导入web3；
从“../ethereum/trafficfine”导入trafficfine；
从“./Layout”导入布局；
从“./头”导入头；
导出默认类Officerreg扩展组件{
陈述={
名字：''，
姓氏：“”，
警官：0，
官员：[]
};
异步组件didmount（）{
const OfficeCount=await trafficfine.methods.GetOfficeCount（）.call（）；
for（设i=0；i{
event.preventDefault（）；
this.setState（{loading:true，errorMessage:''}）；
试一试{
const accounts=wait web3.eth.getAccounts（）；
等待trafficfine.methods.addOfficer（this.state.firstname，this.state.lastname，this.state.officer）
.发送({
发件人：帐户[0]
});
}捕捉（错误）{
this.setState（{errorMessage:err.message}）
}
this.setState（{loading:false}）；
}
render（）{
返回(
军官
增加官员
名字
this.setState（{firstname:event.target.value}）}/>
姓
this.setState（{lastname:event.target.value}）}/>
官员的地址
this.setState（{officer:event.target.value}）}/>
添加官员清除
)
}
}

通过for循环，我正在访问一组数据。我想访问所有这些数据。那么，我如何修改ComponentDidMount方法，以便在组件中访问这些数据？我尝试的不是我所期望的。它只是控制台只记录最后一名官员。我想访问所有官员。有人能帮我吗为我的问题找到解决方案？谢谢！！

像这样试试

this.setState(({ officers }) => ({
     officers: [ ...officers, officer
}));

---

决不要在react中执行setState in loop，而是在循环外部执行。在for loop外部声明一个局部数组变量，并将所有构造的对象推送到数组中。最后在forloop外部执行setState to

state

state

由于您正在

componentDidMount

中循环，因此我建议您按照以下方式进行操作

async componentDidMount(){
    const officerCount = await trafficfine.methods.getofficerCount().call();
    const array = [];
    for(let i=0;i<officerCount;i++){
      const officer={
        firstname:'',
        lastname:'',
        address:0
      }

      const officers = await trafficfine.methods.getNthOfficerName(i).call();
      officer.firstname=officers[0];
      officer.lastname=officers[1];
      officer.address=officers[2];
      array.push(officer);
    }
    this.setState({officers:array});

  }

 render(){
    console.log(this.state.officers);//you will get updated values here
    return(

    )
 }