无法将 json 映射到 React 渲染答案

【问题标题】：Having trouble mapping json into React render无法将 json 映射到 React 渲染
【发布时间】：2020-05-14 04:31:14
【问题描述】：

更新：我正在尝试：

1) 为每个对象生成一个 DataSourcesCard。

2) 将组件中的键值对映射为一个简单的列表。（我收到一个错误，因为“对象作为 React 子项无效（找到：带有键 {datasourceType、sqlDatabaseType、用户、密码、主机、端口、命令、id} 的对象）。如果您打算呈现一组子项，请改用数组。”。

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

This is the log of JSON after fetch

代码如下：

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>
  );
}
}

【问题讨论】：

标签： json reactjs dictionary

【解决方案1】：

this.setState() 是异步的，因此您无法像使用console.log()（同步）那样访问数据。

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

this.setState({ data: response }, () => console.log(this.state.data));

或在render 块中使用console.log(this.state.data)。

【讨论】：