0

我已经成功将道具传递到另一个屏幕，但是如何在第二个屏幕上全局使用道具？

我需要能够在所有函数中使用从屏幕 1 传递的道具render()，因为我正在使用道具中的数据进行 fetch 调用，并使用与render()调用相同的道具数据。

例如，我需要这样做：

constructor(props) {
    super(props);
    this.state = {
      data: [],
      rowData: this.props,
    }
  }

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

  componentDidMount() {
    this.getData();
  }

  render() {      

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

        <Row>
          <Text>Company: {rowData.company}</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={{paddingTop: 20}}>
          <Progress.Bar progress={this.state.data.progress * .1} width={200} />
        </View>

        <Divider styleName="line" />

      </ScrollView>
    );
  }

显然，我没有做正确的事情，但我无法弄清楚。我究竟做错了什么？

这个问题更多地解释了我的屏幕和fetch电话。

编辑：我根据下面的答案进行了更改并更新了我的代码。屏幕加载，然后出现此错误：

undefined 不是对象（评估 'this.state.data.progress）

对于这一行：

<Progress.Bar progress={this.state.data.progress * .1} width={200} />
4

1 回答 1

2

据我所知，您有两种选择：

1）当您第一次收到道具时，您可以将它们存储在组件状态中，然后您可以通过调用 this.state 在当前组件中的任何位置引用它们

2）您可以使用 Redux 将所有数据存储在 Reducer 中，然后它们将在您在 mapStateToProps 中实例化并连接的每个组件中可用。

选择哪一个，这取决于您需要遵循此架构的次数和组件数量。

你可以在他们的官方文档中获得更多关于 Redux 的信息。这是他们提供的一个简单示例：http ://redux.js.org/docs/basics/ExampleTodoList.html

希望能帮助到你。

于 2017-09-09T15:07:31.930 回答