Shoutem fetch data not displaying

Question

First I want to start by saying I am a total noob at React Native and Shoutem. I am not sure if I should write Shoutem or React Native in the subject of my questions, but here is my problem.

I have two screens:

1. Screen1.js
2. Screen2.js

Screen1 displays a list of items returned from a fetch. Once I click on the item, it will open the second screen which is the details screen.

I am passing data from screen1 to screen2. In screen2 I need to make another fetch call for different data, but it does not work. I am doing exactly the same thing on both screens.

Here is my code for 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);

I am passing rowData to Screen2. I then need to make another fetch calling using data from rowData as it is a path parameter needed for the API call in Screen2.

So basically I need to make a fetch call in Screen2 like this:

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

Here is my code for 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>
    );
  }
 }

My fetch URL returns data like this:

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

This only returns one data object like what you see above.

When I run the code I get this error: null is not an object (evaluating 'Object.keys(e[t])')

Please let me know if you need me to provide more info.

I have tried so many different things and nothing seems to work so I am in need of some help. What am I doing wrong?

Answer 1

Not sure why this works but it does.

I used a function to fetch my data and then call the function in componentDidMount like this:

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

Then to get the values from the JSON response I am doing this: this.state.data.name

I am having another issue, but I will create another question.