Javascript 如何从db查询创建动态下拉列表？

因此，我从Firestore中提取了一个公司列表，并试图将它们映射到下拉列表中的选择中。公司状态正从Firestore中填充，但未创建/更新我的选项。如何获得动态填充的选项

我的状态和db pull：

constructor(props) {
    super(props);
    this.state = {
      db: '',
      companies: [],
      jobs: [],
      company: 'Company',
      job: 'Job'
    };
  }

  componentDidMount() {
    this.db = firestore.firestore();
    this.db.collection("companies")
    .get()
    .then(querySnapshot => {
      const data = querySnapshot.docs.map(doc => doc.data());
      console.log(data);
      this.setState({ companies: data });
    });
  }

我尝试创建选项的位置（基于我找到的堆栈帖子）：

createCompanySelections（）{
var公司选择=[]；
如果（本公司）{
company_selections=this.companys.map（（Name）=>{Name}）；
}
返回公司选择
}

我尝试插入选择的位置（使用materialUI）：

公司
{this.createCompanySelections（）}

//更清洁解决方案的更新答案 看起来您的组件不会在该更改上重新渲染，所以要确保它确实拾取了更改，只需在渲染中传递新数据

constructor(props) {
  super(props);
  this.state = {
    db: '',
    companies: [],
    jobs: [],
    company: 'Company',
    job: 'Job'
  };
 }

 componentDidMount() {
    this.db = firestore.firestore();
    this.db.collection("companies")
    .get()
    .then(querySnapshot => {
      const data = querySnapshot.docs.map(doc => doc.data());
      console.log(data);
      // set copmany options on state, so component re-renders once they are set
      this.setState({ 
        companies: data,
      });

    });
  }

// looks like you always pass an array 
  createCompanySelections(companies) {
     return companies.map((Name) => <option key={Name}>{Name}</option>);
  }

构造函数（道具）{
超级（道具）；
此.state={
db:“”，
公司：[]，
职位：[]，
公司：'公司'，
工作：“工作”
};
}
componentDidMount（）{
this.db=firestore.firestore（）；
本.db.集合（“公司”）
.get（）
.然后（querySnapshot=>{
const data=querySnapshot.docs.map（doc=>doc.data（））；
控制台日志（数据）；
//将copmany选项设置为on状态，以便组件在设置后重新渲染
这个.setState（{
公司：数据，
});
});
}
//看起来你总是通过一个数组
创建公司选择（公司）{
返回companys.map（（Name）=>{Name}）；
}

在表单控件中，执行以下操作：

 {!!this.companies.length && (
    <FormControl>
    <InputLabel htmlFor="companies">Companies</InputLabel>
      <NativeSelect
        variant='standard'
        value={this.state.company}
        onChange={this.updateInput}
        inputProps={{
          name: 'company',
        }}
      >
        {this.createCompanySelections(this.companies)}
      </NativeSelect>
    </FormControl>
  )}

{！！this.companys.length&&(
公司
{this.createCompanySelections（this.companys）}
)}

constructor(props) {
  super(props);
  this.state = {
    db: '',
    companies: [],
    jobs: [],
    company: 'Company',
    job: 'Job'
  };
 }

 componentDidMount() {
    this.db = firestore.firestore();
    this.db.collection("companies")
    .get()
    .then(querySnapshot => {
      const data = querySnapshot.docs.map(doc => doc.data());
      console.log(data);
      // set copmany options on state, so component re-renders once they are set
      this.setState({ 
        companies: data,
      });

    });
  }

// looks like you always pass an array 
  createCompanySelections(companies) {
     return companies.map((Name) => <option key={Name}>{Name}</option>);
  }

 {!!this.companies.length && (
    <FormControl>
    <InputLabel htmlFor="companies">Companies</InputLabel>
      <NativeSelect
        variant='standard'
        value={this.state.company}
        onChange={this.updateInput}
        inputProps={{
          name: 'company',
        }}
      >
        {this.createCompanySelections(this.companies)}
      </NativeSelect>
    </FormControl>
  )}