Question

我有以下json我希望在列表视图中显示图像并显示图像，但它显示我下面的错误我正在学习反应 - 本机我从示例页面获取功能但根据我的要求没有成功任何人帮助我这个高度欣赏

TypeError：undefined不是函数（评估'data.map'）

 async  getMoviesFromApi() {
  try {
    let response = await fetch(
      'http://example.com:2580/api/subcategories/1'
    );
    let responseJson = await response.json();
    return responseJson;
  } catch (error) {
    console.error(error);
  }
}

 render() {

  let data = this.getMoviesFromApi(); 
    const { navigate } = this.props.navigation;
    var navigationView = (
      <View style={{flex: 1, backgroundColor: '#fff'}}>
        <Text style={{margin: 10, fontSize: 15, textAlign: 'left'}}>I'm in the Drawer!</Text>
      </View>
    );   
    return (

      <DrawerLayoutAndroid ref={'DRAWER_REF'}
        drawerWidth={300}
        drawerPosition={DrawerLayoutAndroid.positions.Left}
        renderNavigationView={() => navigationView}
        >
        <ScrollView style={{flex: 1, flexDirection: 'column'}}>        
          {
            data.map((x) => {
              return(
                <View style={{width: '100%', height: 80, marginBottom: 20, backgroundColor: 'powderblue'}} >
              <Image source={{uri:x[0].imageurl}}
       style={{width: '100%', height: 80,}} />
                </View>

              ) 
            })
          }
          </ScrollView >
        </DrawerLayoutAndroid>


    );
  }

JSON

 [
      {
        "ID": 1,
        "imageurl": "http://example.com:2580/Images/speedometer-540-2501.png",
         "langType": 1 
      },
      {
        "ID": 2,
         "imageurl": "http://example.com:2580/Images/image2.png",
        "langType": 1
      }
      ]

Answer 1

我更喜欢您使用componentDidMount生命周期方法来获取数据。

componentDidMount() {
 fetch('http://example.com:2580/api/subcategories/1')
 .then(resp => resp.json())
 .then(json => this.setState({json});
}

现在您在组件状态中有JSON响应。

然后，您可以使用render()

在this.state.json -method上获取它

这样您就可以实现异步渲染。您只需要在state中有任何数据之前处理案例。

实施例

render(){
 return(){
  this.state.json.length > 0 ?
    <div>{this.state.json.url}</div> :
    null
 }
}

在您呈现null状态的任何数据之前的含义，并且当您拥有数据时，您将呈现您的JSON。

你应该首先设置你的状态 state = { json: []}或state = { json: null}

我更喜欢通常将它最初设置为null并显示loader / spinner，如果它为null。然后，根据JSON数据长度是否为0，我将呈现示例文本no data found以及其他请求的数据。

Answer 2

您的函数getMoviesFromApi是异步函数，而render则不是。因此，data在您的情况下始终为空。

而不是在getMoviesFromApi内调用render，而是在componentDidMount下调用它，并将数据存储在组件的状态中。

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

async componentDidMount() {
  const data = await this.getMoviesFromApi() || [];
  this.setState({ data: data });
}

render() {
  let data = this.state.data;
  // the rest remains the same
}

API调用时如何解决typeError

2 个答案: