Shoutem 获取数据不显示

Question

首先我想说我是 React Native 和 Shoutem 的菜鸟。我不确定我的问题是应该写Shoutem还是React Native，但这是我的问题。

我有两个屏幕：

Screen1.js
Screen2.js

屏幕 1 显示从提取返回的项目列表。单击该项目后，它将打开第二个屏幕，即详细信息屏幕。

我正在将数据从 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);
      });

这是我的屏幕 2 代码：

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

我获取的 URL returns 数据是这样的：

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

这只是 returns 一个数据对象，就像您在上面看到的那样。

当我运行代码时，我得到这个错误： 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

我有另一个问题，但我会创建另一个问题。

Shoutem 获取数据不显示

Shoutem fetch data not displaying

react-native

fetch-api

shoutem