未显示的Shoutem提取数据

Question

首先，我想说，我是一个完全的菜鸟在反应土著和寿腾。我不确定我是否应该在我的问题主题上写“神像”或“反应本族语”，但这是我的问题。

我有两个屏幕：

1. Screen1.js
2. Screen2.js

Screen1显示从提取返回的项列表。一旦我点击该项目，它将打开第二个屏幕，即详细信息屏幕。

我正在将数据从screen1传递给screen2。在screen2中，我需要对不同的数据进行另一次提取调用，但是它不起作用。我在两个屏幕上都在做同样的事情。

下面是我的Screen1代码：

import React, {
  Component
} from 'react';

import {
  ActivityIndicator,
  TouchableOpacity
} from 'react-native';

import {
  View,
  ListView,
  Text,
  Image,
  Tile,
  Title,
  Subtitle,
  Overlay,
  Screen
} from '@shoutem/ui';

import {
  NavigationBar
} from '@shoutem/ui/navigation';

import {
  navigateTo
} from '@shoutem/core/navigation';

import {
  ext
} from '../extension';

import {
  connect
} from 'react-redux';

export class List extends Component {
  constructor(props) {
    super(props);
    this.renderRow = this.renderRow.bind(this);
    this.state = {
      isLoading: true,
      content: null,
    }

  }

  componentDidMount() {
    return fetch('https://www.cannabisreports.com/api/v1.0/strains').then((response) => response.json()).then((responseData)  => {
      this.setState({
        isLoading: false,
        content: responseData
      });
    }).done();
  }

  renderRow(rowData) {
    const { navigateTo } = this.props;

    return (
        //<Text>{rowData.name}, {rowData.createdAt.datetime}</Text>
        <TouchableOpacity onPress={() => navigateTo({
            screen: ext('Strain'),
            props: { rowData }
        })}>
          <Image styleName="large-banner" source={{ uri: rowData.image &&
            rowData.image ? rowData.image : undefined  }}>
            <Tile>
              <Title>{rowData.name}</Title>
              <Subtitle>none</Subtitle>
            </Tile>
          </Image>
        </TouchableOpacity>
    );
  }

  render() {
    if (this.state.isLoading) {
      return (
        <View style={{flex: 1, paddingTop: 20}}>
          <ActivityIndicator />
        </View>
      );
    }

    return (
      <View style={{flex: 1, paddingTop: 20}}>
        <ListView
          data={this.state.content.data}
          renderRow={rowData => this.renderRow(rowData)}
        />
      </View>
    );
  }
}

// connect screen to redux store
export default connect(
    undefined,
    { navigateTo }
)(List);

我要把rowData传给Screen2。然后，我需要使用rowData中的数据进行另一个获取调用，因为它是Screen2中的API调用所需的路径参数。

因此，基本上，我需要在Screen2中进行如下所示的提取调用：

fetch('https://mywebsite.com/'+rowData.something+'/myotherdata')
      .then((response) => response.json())
      .then((responseJson) => {
        this.setState({
          content: responseJson.data
        })
      })
      .catch((error) => {
        console.error(error);
      });

下面是我的screen2代码：

export default class Strain extends Component {

  constructor(props) {
    super(props);
    this.state = {
      content: null,
    }
  }

  componentDidMount() {
    return fetch('https://mywebsite.com/'+rowData.something+'/myotherdata')
      .then((response) => response.json())
      .then((responseJson) => {
        this.setState({
          content: responseJson.data
        })
      })
      .catch((error) => {
        console.error(error);
      });
  }

  renderRow(dataContent) {
    return (
      <Text>{dataContent.name}</Text>
      // This does not work either -> <Text>{dataContent}</Text>
    );
  }

  render() {
    const { rowData } = this.props; //This is coming from screen1.js 

    return (
      <ScrollView style = {{marginTop:-70}}>
        <Image styleName="large-portrait" source={{ uri: rowData.image &&
        rowData.image ? rowData.image : undefined }}>
          <Tile>
            <Title>{rowData.name}</Title>
            <Subtitle>{rowData.createdAt.datetime}</Subtitle>
          </Tile>
        </Image>

        <Row>
          <Text>Seed Company: {rowData.seedCompany.name}</Text>
        </Row>

        <Divider styleName="line" />

        <Row>
          <Icon name="laptop" />
          <View styleName="vertical">
            <Subtitle>Visit webpage</Subtitle>
            <Text>{rowData.url}</Text>
          </View>
          <Icon name="right-arrow" />
        </Row>

        <Divider styleName="line" />

        <View style={{flex: 1, paddingTop: 20}}>
          <ListView
            data={content}
            renderRow={dataContent => this.renderRow(dataContent)}
          />
        </View>

        <Divider styleName="line" />

      </ScrollView>
    );
  }
 }

我的fetch URL返回如下数据：

{
  data: {
    name: "7.5833",
    another_name: "8.6000",
    different_name: "5.7500",
  }
}

这只返回一个数据对象，如上面所示。

当我运行代码时，我会得到以下错误：null is not an object (evaluating 'Object.keys(e[t])')

如果你需要我提供更多的信息，请告诉我。

我尝试了这么多不同的事情，但似乎没有什么效果，所以我需要一些帮助。我做错了什么？

Answer 1

不知道为什么会起作用，但它确实起作用。

我使用一个函数来fetch我的数据，然后在componentDidMount中调用这个函数，如下所示：

getData() {
    return fetch('https://mywebsite.com/myotherdata')
      .then((response) => response.json())
      .then((responseJson) => {
        this.setState({
          data: responseJson.data
        });
      })
      .catch((error) => {
        console.error(error);
      });
  }

  componentDidMount() {
    this.getData();
  }

然后，为了从JSON响应中获取值，我执行以下操作：this.state.data.name

我有另一个问题，但我会提出另一个问题。