undefined 不是一个函数（在 '...this.state.results.map...' 附近）

Question

我是 React 的新手 native.I 有一个问题我一直在处理一些 days.I 想用 map.Can 显示我的数据你们告诉我我在哪里做错了吗？（我想我在 scrollview 中的结果有误）

class 电影扩展组件{

state= {
    apiurl:'http://www.omdbapi.com/.............................',
    s:'',
    results: [],
    selected:{}
}

 searchFunc(s) {
     this.setState({s: s})
    axios(this.state.apiurl+ "&s="+s).then(response => 
        this.setState({results: response.data.Search[0]}));
        console.log(this.state.results)    
 }
render() {
    return(
        <View style={{flex:1,backgroundColor:'#356292'}}>
        <View
        style={styles.sectionContainer}>      
            <View style={styles.section}>
            <TextInput style={styles.section2}
            onChangeText = {(s) => this.searchFunc({s})}
            value={this.state.s}
            placeholder="Movies,Series.."
             >
                  </TextInput>
                  <TouchableOpacity 
                style={{justifyContent: 'center', alignItems: 'center'}}
                onPress={() => this.searchFunc()}> 
                <Image 
                source ={require('../img/seach.png')}
                style={{width:width*0.05,height:height*0.03}}
                >
                </Image>
                </TouchableOpacity>                          
                </View>                  
        </View>            
        <ScrollView style={styles.scroll}>
            {this.state.results.map(results=>(
                <View key={this.state.results.imdbID} 
                style={styles.scroll2}>
                <Image source={{uri: this.state.results}}
                style={{width:width*0.3, height:height*0.4}}>
                </Image>     
                <Text style={styles.heading}>
                {this.state.results.Title}
                </Text>
                </View>
            ))}

        </ScrollView>
        </View>           

    );
}

Answer 1

我想你应该将 Search 传递给状态而不是 Search[0]，这是对象而不是 map，原因是 map 函数是没有工作。

axios(this.state.apiurl+ "&s="+s).then(response => 
        this.setState({results: response.data.Search}));
        console.log(this.state.results)

巧合的是，我用同一部电影 API 创建了一个应用程序，你可以在这里找到它：Github Repo, Movie App

Answer 2

从您原来的 post 的评论来看，我猜 response.data.Search[0] 也是一个数组。如果是这样，您的结果状态更新就可以了。否则，您应该将结果状态设置为 response.data.Search.

我在您的代码中注意到的其他问题是在 map 函数中，您正在将数组与引用结果变量的每个项目进行映射，但是在您的 jsx 中，您正在尝试访问 results 状态变量.应该是

<ScrollView style={styles.scroll}> 
  {
    this.state.results.map(result => (
      <View 
        key={result.imdbID} 
        style={styles.scroll2}
      >
         <Image 
            source={{uri: result.image}} // use correct key from result object
            style={{width:width*0.3, height:height*0.4}}
         />
         <Text style={styles.heading}>{result.Title}</Text>
      </View>
     ))
  }
</ScrollView>

同样在您的 Textinput onChangeText 回调函数中，您不必将该值作为对象传递。你可以改成

<TextInput 
  style={styles.section2}
  onChangeText={(s) => this.searchFunc(s)}
  value={this.state.s}
  placeholder="Movies,Series.."
/>

undefined 不是一个函数（在 '...this.state.results.map...' 附近）

undefined is not a function (near '...this.state.results.map...')

javascript

react-native

react-native-android