Блог

Я получаю некоторую информацию и помещаю в свое состояние react. Я могу регистрировать данные в состоянии react, но на моем дисплее не отображается вывод для {singleEmployee} … Может ли это быть ошибкой в react версии 16.8.5

 import React from 'react';
var Airtable = require('airtable');
var base = new Airtable({apiKey: ''}).base('');

class Firm extends React.Component {
constructor(props) {
super(props);
this.state = {
  name:props.location.firm.firmName,
  year:props.location.firm.yearFounded,
  address:props.location.firm.officeAddress,
  website:props.location.firm.website,
  aum:props.location.firm.aum,
  check:props.location.firm.checkSize,       
  employees:props.location.firm.employees,
  focus:props.location.firm.detailedFirmSpecialisations, 
  loaded:false,
  employeesInfo:null,   
};
}

componentDidMount(){    
const ids = this.state.employees
const employeesInfo = [];
ids.forEach((id)=>{
  base('EmploymentHistory').find(id, (err, record)=>{
    if (err) { 
      console.error(err); 
      return; 
    } 
    employeesInfo.push({
      name:record.get('Employment ID'),
      job:record.get('Job Title'),
      investment:record.get('Investment lookup'),
      dateStarted: `${record.get('Start Month (1-12)')} ${record.get('Start Year')}`    
    })
  })
})
console.log(employeesInfo)
this.setState({
  employeesInfo:employeesInfo,
  loaded:false
},()=>
  this.setState({
    loaded:true
  })
)  
}

render() {  
const {name,year,address,website,aum,check,focus,employeesInfo,loaded} = this.state;
{loaded amp;amp; console.log(employeesInfo)}
const singleEmployee = employeesInfo amp;amp; employeesInfo.map(employee=>{
  return <h4 key={employee.name}> Name is {employee.name}</h4>
})

if(!loaded){
  return(
    <div>loading...</div>
  )
}
return (
  <div>
    <h2>{name ? name : 'N/A'} Audit Report</h2>
    <h4>Year Founded {year ? year : 'N/A'}</h4>
    <h4>Address {address ? address : 'N/A'}</h4>
    <h4>Website {website ? website : 'N/A'}</h4>
    <h4>AUM {aum ? aum : 'N/A'}</h4>
    <h4>Cheque Size {check ? check : 'N/A'}</h4>
    <h4>Investment Focus {focus ? focus : 'N/A'}</h4>
    <h2>Employees</h2>
    {singleEmployee}
  </div>
); 
} 
}
  

Поскольку employeesInfo это массив, вам нужно будет взять элемент по индексу, например

 const singleEmployee = employeesInfo amp;amp; (<h4 key={employeesInfo[0].name}> Name is {employeesInfo[0].name}</h4>)
  

приведенный здесь код:

 const singleEmployee = employeesInfo amp;amp; employeesInfo.map(employee=>{
  return <h4 key={employee.name}> Name is {employee.name}</h4>
})
  

В singleEmployee будет сохранен массив элементов react, а не один элемент

Похоже, что сначала вам следует найти элемент в employeesInfo , но у вас нет для него идентификатора.

Я сделал для вас скрипку с более простой версией того, чего вы пытаетесь достичь:https://jsfiddle.net/9L8u7fex /

Я думаю, что код для отображения employInfo не имеет никаких проблем. Проблема, с которой вы сталкиваетесь здесь, заключается в том, как вы добавляете больше значений в массив, который выполняется асинхронно. Я бы посоветовал вам сохранить список в состоянии.

вы можете обратиться к моему образцу в sandboxhttps://codesandbox.io/s/0v3xo8p4yp. если вы закомментируете параметр setTemp, который на самом деле запускает новый рендеринг только после того, как я обновлю список. Если вы закомментируете этот код, новый список никогда не появится в dom. Я думаю, что это очень похоже на вашу проблему