Question

更新：我正在尝试：

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

2）将组件中的键值对映射为简单列表。（我收到一个错误消息是因为“对象作为React子对象无效（找到：带有键{datasourceType，sqlDatabaseType，用户，密码，主机，端口，命令，id}的对象）。”）如果要渲染子代集合，请改用数组。”

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

Answer 1

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

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

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

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

将json映射到React渲染时遇到麻烦

1 个答案: