Question

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

我有两个屏幕：

Screen1.js
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调用：

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

我的提取网址返回如下数据：

{
  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

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

Shoutem提取数据未显示

1 个答案: