Question

我正在尝试显示带有每种属性类型的属性数量的标志。接收到来自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>

    )

  }

Answer 1

您可以将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>
    );
}

Answer 2

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

希望有帮助。

Answer 3

您可能会发现将其分解为一个单独的组件并在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 } />

如何将本机组件呈现在获取成功响应中？

3 个答案: