Javascript 无法在react JS中操作映射函数

我试图点击[你可以直接看到，点击它]上的api，但我无法映射到整个州。 我试着浏览这些问题，但还是没有找到

我在app.js中的代码是

import React, { Component } from 'react'

import api from '../api/covidapi'
import SearchBar from './SearchBar'

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
                  country : 'Please Enter the country',
                  active_cases : 'No country found',
                  countries : [],
                  errorMessage : '',
                  isLoading : false,
              };
  }

  async componentDidMount() {

    const response = await api.get('/summary');
    console.log('data loaded   = >  ', response);

       console.log(response.data.Countries.length) // giving 247
       console.log('countries ', response.data.Countries) //lists all countries {....},{...}...

      this.setState({countries:response.data.Countries})

      // console.log('global end')
      this.setState({
          totalConfirmed : response.data.Global.TotalConfirmed,
      })
    } //component did mount ended.

      onSearchSubmit = async (country) =>{
            console.log(country)

            try {

              const response = 
                 await api.get(`/live/country/${country}/status/confirmed`)

      this.setState({country:country, active_cases:response.data[6].Active})      
                }

            catch(e) {
                    this.setState({errorMessage : "Country Doesn't exist or misspelled"})
               }  
    }; //onsearch submit ended.

  render() {

  return (
     <div>  
        <div className="container">
             <p style={{textAlign:'center',
                   backgroundColor:'green',            
                   color:'white',
                   width:'97%',margin:'auto',
                   padding:'24px',
                   marginTop:'12px',}}>
              Total confirmed as of now is <span> :  </span>   
                    <span style={{color : 'red'}} > 
                            {this.state.totalConfirmed}
                    </span>
          </p>
          <SearchBar onSubmit = {this.onSearchSubmit}/>
      </div>   

    <div className="container">
            <h2 className="bg bg-primary" style={{marginBottom:'0px', 
                      textAlign:'center',marginTop:'15px',
                      padding:'10px'}}>Covid19 Cases In single Country
             </h2>

   <table className="table table-striped">
          <thead>
                <tr>
                  <th>Country</th>
                  <th>Acitve Cases</th>
                </tr>
          </thead>

         <tbody>
                <tr>
                      <td>{this.state.country}</td>
                      <td>{ this.state.active_cases}</td>
                </tr>  
         </tbody> 
</table>

</div>

  <br />
  <hr />

<div className="container">
     <div style={{textAlign:'center',color:'red',fontWeight:'bold'}}>
      </div>

      <h2 className="bg bg-primary" style={{marginBottom:'0px',
          textAlign:'center', padding:'10px'}}> 
          Covid19 Cases Worldwide
     </h2>

   <table className="table table-striped table-hover table-dark">
            <thead>
                  <tr>
                    <th>S.N</th>
                    <th>Country Name</th>
                    <th>Confirmed Cases</th>
                    <th> Total Deaths</th>
                    <th>Total Recovered</th>
                  </tr>
            </thead>
            <tbody>     

     {  
           Object.keys(this.state.countries).map((country) => (          
            <tr>   
                  <td>{country}</td> 
                  <td>........</td>
                  <td>........</td>
                  <td> ........</td>
                  <td>............</td>    
           </tr> 
         ))
      }  

          </tbody>
    </table> 
  </div>              
</div>
  ); 
  }
}

export default App;

问题出在app.js中的这段代码中

{  
       Object.keys(this.state.countries).map((country) => (          
        <tr>   
              <td>{country}</td> 
              <td>........</td>
              <td>........</td>
              <td> ........</td>
              <td>............</td>    
       </tr> 
     ))
  }

{
Object.key（this.state.countries）.map（（国家）=>）
{国家}
........
........
........
............    
))
}

我无法绘制我所在州的国家地图，我想有 对象和数组有问题

渲染在地图中传递的国家时，它将返回整数值，如1,2,3。。。。无法获得其他值。 控制台中的响应如下所示

---

我尝试的是在应用程序加载时将所有国家/地区列表显示到表中

您可以直接使用

this.state.countries

，而不使用

Object.keys（）

（它已经是一个数组），并使用每个项目内的属性，如下所示：

{
  this.state.contries.map(item => {
    return(
        <tr>
            <td> { item.Country } </td>
            <td> { item.totalConfirmed } </td>
            ... // Other tds
        </tr>
      )
   }
}

{
this.state.contries.map（项=>{
返回(
{项目.国家}
{item.totalconfirm}
…//其他tds
)
}
}

我认为添加codesandbox链接可以获得更好的帮助。请发布实际的代码，而不是代码的图片，但我知道这是非常基本的，只是发布了照片。不，如果您发布codesandbox，我可以在一分钟内解决您的问题。@O.O我应该删除它并重新发布吗？谢谢，它现在可以工作了。基本上问题是识别在开发人员控制台中调整数据和格式。

{
  this.state.contries.map(item => {
    return(
        <tr>
            <td> { item.Country } </td>
            <td> { item.totalConfirmed } </td>
            ... // Other tds
        </tr>
      )
   }
}