将json映射到React render时遇到问题

更新：我正在尝试：

1） 为每个对象生成数据源卡

2） 将组件中的键值对映射为一个简单列表。（我收到一个错误，因为“对象作为React子对象无效（找到：具有键{datasourceType，sqlDatabaseType，user，password，host，port，command，id}的对象）。如果要呈现子对象集合，请改用数组。”

仅供参考，fetch包含一个由3个对象组成的数组。每个对象包含一个带有单个键值对的id和一个包含多个键值对的json对象

代码如下：

import React, { Component } from 'react';
import { DataSourcesWrapper, 
AddDataSourcesButton, 
DataSourcesCard, 
CardContainer,
EditButton,
DeleteButton,
TextHeader,
UList,
Logo,
List,
Span } from './DataSources.style';
import { IconWindowCogs } from '../../../assets/images/icons/IconWindowCogs.svg';

export default class DataSources extends Component { 
  constructor(props){
    super(props);
    this.state = {
    data: []
    };
  }

  componentDidMount(){
    let $fp = navigator.platform + " " + navigator.appName + " " + navigator.language + " " + window.screen.width + " " + window.screen.height;
    fetch("url", {
      method: "POST",
      mode: 'cors',
      headers: {"content-type": "application/x-www-form-urlencoded"},
      body: JSON.stringify({
        atomic_session: 1,
        command: "list_all",
        fp: $fp
      })
    }).then(response => response.json())
      .then((res) => {
          this.setState({
            data: res
          },
          () => console.log(this.state.data))
          ;
        }
      )

  }  

  render () {
  return (

    <DataSourcesWrapper>
      <AddDataSourcesButton>
        Add Data Source
      </AddDataSourcesButton> 
      <CardContainer>
      {this.state.data.map((card) => (
          <DataSourcesCard key={card.id}>
            <Logo src={IconWindowCogs} alt="Logo" />
            <EditButton>Edit</EditButton> <br />
            <DeleteButton>Delete</DeleteButton> <br />
            <TextHeader>{card.json.datasourceType}</TextHeader>
            <UList>
              <List>Command: <Span>{card.json.command}</Span></List>
              <List>Datasource Type: <Span>{card.json.datasourceType}</Span></List>
              <List>Host: <Span>{card.json.host}</Span></List>
              <List>ID: <Span>{card.json.id}</Span></List>
              <List>Password: <Span>{card.json.password}</Span></List>
              <List>Port: <Span>{card.json.port}</Span></List>
              <List>SQLDatabase: <Span>{card.json.sqlDatabaseType}</Span></List>
              <List>User: <Span>{card.json.user}</Span></List>

            </UList>

          </DataSourcesCard>
      ))}
      </CardContainer>
    </DataSourcesWrapper>
  );
}
}

import React，{Component}来自'React'；
导入{datasourceswapper，
添加数据源按钮，
数据源卡，
CardContainer，
编辑按钮，
删除按钮，
文本标题，
乌利斯特，
标志
列表
Span}来自“./DataSources.style”；
从“../../../assets/images/icons/IconWindowCogs.svg”导入{IconWindowCogs}；
导出默认类数据源扩展组件{
建造师（道具）{
超级（道具）；
此.state={
数据：[]
};
}
componentDidMount（）{
让$fp=navigator.platform+“”+navigator.appName+“”+navigator.language+“”+window.screen.width+“”+window.screen.height；
获取（“url”{
方法：“张贴”，
模式：“cors”，
标题：{“内容类型”：“application/x-www-form-urlencoded”}，
正文：JSON.stringify({
原子能会议：1，
命令：“列出所有”，
fp:$fp
})
}).then（response=>response.json（））
。然后（（res）=>{
这是我的国家({
数据：res
},
（）=>console.log（this.state.data））
;
}
)
}  
渲染（）{
返回(
添加数据源
{this.state.data.map（（卡）=>(
编辑

删除

{card.json.datasourceType}
命令：{card.json.Command}
数据源类型：{card.json.datasourceType}
主机：{card.json.Host}
ID:{card.json.ID}
密码：{card.json.Password}
端口：{card.json.Port}
SQLDatabase:{card.json.sqlDatabaseType}
用户：{card.json.User}
))}
);
}
}

此.setState（）

是异步的，因此您无法像使用

控制台.log（）

（同步）那样访问数据

要解决此问题，可以使用setState回调函数，该函数将在状态值更新后执行：

this.setState（{data:response}，（）=>console.log（this.state.data））；

或者使用

render

块中的

console.log（this.state.data）