如何在获取成功响应中呈现 react-native 组件？答案

【问题标题】：How can a react-native component be rendered inside a fetch success response?如何在获取成功响应中呈现 react-native 组件？
【发布时间】：2019-04-13 08:43:21
【问题描述】：

我正在尝试显示带有每种属性类型的属性数量的徽章。接收到来自 API 的数据，但 Badge 组件不呈现。

countProp = (id) => {

    fetch('http://10.0.2.2:8000/api/property/' + id).then((data) => data.json())

.then((response) => {

                ```return <Badge value={response.properties.length}/>

            });
    };

此后在renderItem 方法中调用以下函数，该方法用作数组迭代器来呈现属性类型：

 renderItem = ({item}) => {

   return(

    <View>  
    ....

    ```{this.countProp(item.id)}

    </View>

    )

  }

【问题讨论】：

标签： api react-native fetch

【解决方案1】：

您可能会发现将其分解为一个单独的组件并在 componentDidMount 中进行 api 调用更容易，如下所示：

import React, { Component } from "react";
import { Text, View } from "react-native";

export default class Item extends Component {
  componentDidMount() {
    fetch("http://10.0.2.2:8000/api/property/" + this.props.id)
      .then(data => data.json())
      .then(response => {
        this.setState({ length: response.properties.length });
      });
  }

  render() {
    if (!this.state.length) {
      return null;
    }
    return (
      <View>
        <Badge value={this.state.length} />
      </View>
    );
  }
}

然后使用这个组件传递它的id：

import Item from "./path/to/Item.js";

...

<Item id={ 7 } />

【讨论】：

【解决方案2】：

您可以在状态中保存response.properties.length，然后通过renderItem 访问它。像这样的：

fetch('http://10.0.2.2:8000/api/property/' + id).then((data) => data.json())
.then((response) => {
        this.setState({length: response.properties.length});
    });
};

在renderItem，您可以执行以下操作：

renderItem = ({item}) => {
    return(
        <View>  
            <Badge value={this.state.length}/>
        </View>
    );
}

【讨论】：

感谢您的回答！徽章现在呈现，但值为 null，状态似乎没有更新。
你是如何运行第一段代码的？我会把它放在一个方法中并在componentDidMount 中执行它。如果它返回一个值，那么状态将被设置并且它将在徽章中可见。不知道你的方法是什么。
是的，我把它放在方法“countProp(typeID)”中，但是我想要的结果要求这个方法应该在“renderItem(typesObject)”方法中调用才能获得数量每个 TYPE 的属性。所以在 componentDidMount 中调用 countProp() 对我不起作用。我希望我清楚地解释了我的方法，并再次感谢您的帮助。

【解决方案3】：

countProp = (id) => {
    fetch('http://10.0.2.2:8000/api/property/' + id).then((data) => data.json()).then((response) => {
            this.setState({ length: response.properties.length });
    });
};

renderItem = ({ item }) => {
    this.countProp(item.id);
    return (
        <View>
            <Badge value={this.state.length} />
        </View>
    );
}

希望对您有所帮助。

【讨论】：

我也尝试过这种方法，但没有解决问题，无论如何谢谢。