1

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

我有两个屏幕：

  1. Screen1.js
  2. Screen2.js

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

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

这是我的 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。然后我需要使用来自的数据进行另一个 fetch 调用，rowData因为它是 Screen2 中 API 调用所需的路径参数。

所以基本上我需要像这样在 Screen2 中进行 fetch 调用：

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])')

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

我尝试了很多不同的东西，但似乎没有任何效果，所以我需要一些帮助。我究竟做错了什么？

4

1 回答 1

0

不知道为什么这有效，但确实有效。

我对我的数据使用了一个函数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

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

于 2017-09-09T13:15:16.793 回答