Question

这是我的“聊天框”代码，出现“我”和“我”消息的窗口。

import React, { Component } from "react";
import {
 StyleSheet,
 Text,
 View,
 TouchableOpacity,
 TextInput,
 FlatList,
 Platform,
 AsyncStorage
} from "react-native";
import Tutor from "../image/krutika.jpg";
import {
 Container,
 Header,
 Left,
 Input,
 Body,
 Right,
 Thumbnail,
 Button
} from "native-base";
import FontAwesome from "react-native-vector-icons/FontAwesome";
import Ionicons from "react-native-vector-icons/Ionicons";
import Icon1 from "react-native-vector-icons/FontAwesome";
import axios from "axios";

export default class ChatBox extends Component {
 static navigationOptions = {
   header: null
 };
 state = {
   group_msgs: [],
   student_id: null
 };
   

 renderDate = date => {
   return <Text style={styles.time}>{date}</Text>;
 };

 componentWillMount = () => {
   this.loading();
   const { navigation } = this.props;
   groupName = navigation.getParam("groupName");
   group_id = navigation.getParam("group_id");
 };

 loading = async () => {
   const userid = await AsyncStorage.getItem("user_id");
   this.state.student_id = userid;

   try {
     let { data } = await axios.get('https://www.qualpros.com/chat/imApi/getMessage?groupId=6&limit=10&start=0&userId=62').then(response => {
         //  console.log(response)
         if (response.status == 200) {
            this.setState({ group_msgs: response.data.response.message });
             console.log(response.data.response)
         } else {
         }
       });
   } catch (err) {
     console.log(err);
   }
 };
 render() {
   return (
     <Container>
       <Header style={{ backgroundColor: "#d91009" }}>
         <Left style={{ flex: 1, flexDirection: "row" }}>
           <TouchableOpacity
             style={styles.backArrow}
             onPress={() => this.props.navigation.navigate("ChatScreen")}
           >
             <FontAwesome name="angle-left" size={30} color="#fff" />
           </TouchableOpacity>

           <Thumbnail
             source={Tutor}
             style={{
               marginLeft: 8,
               width: 30,
               height: 30,
               borderRadius: 30 / 2
             }}
           />
         </Left>
         <Body>
         
             <Text
              onPress={() => {
                 
                   this.props.navigation.navigate("Groupmembers", {
                     group_id:group_id,
                     groupname:groupName,
                   });
                 }}
               style={{
                 alignSelf: Platform.OS == "android" ? "center" : null,
                 fontSize: 17,
                 color: "#fff"
               }}
             >
               {groupName}
             </Text>
          
         </Body>
         <Right>
           <Button
             style={{ backgroundColor: "#d91009" }}
             onPress={() => {
               this.props.navigation.navigate("TutorCalender");
             }}
           >
             <Icon1 active name="calendar" size={24} color="#FFF" />
           </Button>
         </Right>
       </Header>
       <View style={styles.container}>
         <FlatList
           style={styles.list}
           data={this.state.group_msgs}
           keyExtractor={item => {
             return item.m_id;
           }}
           renderItem={message => {
             console.log(item);
             const item = message.item;
             let inMessage = (item.sender === this.state.userid) ? 'in' : 'out';
             let itemStyle = inMessage ? styles.itemIn : styles.itemOut;
             return (
               <View style={[styles.item, itemStyle]}>
                 <View style={[styles.balloon]}>
                   <Text>{item.message}</Text>
                 </View>
               </View>
             );
           }}
         />
         <View style={styles.footer}>
           <View style={styles.inputContainer}>
             <TextInput
               style={styles.inputs}
               placeholder="Write a message..."
               underlineColorAndroid="transparent"
               onChangeText={name_address => this.setState({ name_address })}
             />
           </View>

           {/* <TouchableOpacity style={styles.btnSend}>
                           <Ionicons name="md-send" size={36} color='#d91009' /> style={styles.iconSend} />
                       </TouchableOpacity> */}
         </View>
       </View>
     </Container>
   );
 }
}

const styles = StyleSheet.create({
 container: {
   flex: 1
 },
 list: {
   paddingHorizontal: 17
 },
 footer: {
   flexDirection: "row",
   height: 60,
   backgroundColor: "#eeeeee",
   paddingHorizontal: 10,
   padding: 5
 },
 btnSend: {
   //color: "#d91009",
   width: 40,
   height: 40,
   borderRadius: 360,
   alignItems: "center",
   justifyContent: "center"
 },
 iconSend: {
   width: 30,
   height: 30,
   alignSelf: "center"
 },
 inputContainer: {
   borderBottomColor: "#F5FCFF",
   backgroundColor: "#FFFFFF",
   borderRadius: 30,
   borderBottomWidth: 1,
   height: 40,
   flexDirection: "row",
   alignItems: "center",
   flex: 1,
   marginRight: 10
 },
 inputs: {
   height: 40,
   marginLeft: 16,
   borderBottomColor: "#FFFFFF",
   flex: 1
 },
 balloon: {
   maxWidth: 250,
   padding: 15,
   borderRadius: 20
 },
 itemIn: {
   alignSelf: "flex-start",
   backgroundColor: "#eeeeee"
 },
 itemOut: {
   alignSelf: "flex-end",
   backgroundColor: "#DCF8C5"
 },
 time: {
   alignSelf: "flex-end",
   margin: 15,
   fontSize: 12,
   color: "#808080"
 },
 item: {
   marginVertical: 14,
   flex: 1,
   flexDirection: "row",

   borderRadius: 300,
   padding: 1
 }
});

我正在使用axios来获取api，api响应作为数组中的Array传入，但屏幕上没有任何内容。

我可以通过存储响应消息来获取消息，但是我无法在消息上循环。

请帮助。

预先感谢

Answer 1

When doing a GET request to the endpoint in your code the response looks as follows:

{  
   "status":{  
      "code":200,
      "message":"Success"
   },
   "totalMessage":6,
   "recentMessageId":228,
   "response":[
      ...
   ]
}

Inside the response object there's an array of message objects so you can't use response.data.response.message when setting state. That part of your code needs to be:

this.setState({ group_msgs: response.data.response });

Now you should be able to iterate through the group_msgs object to get the message key value for each item in the array.

Also in the FlatList component you should have

keyExtractor={item => {
  return item.message.m_id;
}}

Your renderItem seems to be wrong as well, see should be something like this:

renderItem={ ({item}) => {
  let inMessage = (item.sender.usedId === this.state.userid) ? 'in' : 'out';
  let itemStyle = inMessage ? styles.itemIn : styles.itemOut;
  return (
    <View style={[styles.item, itemStyle]}>
      <View style={[styles.balloon]}>
        <Text>{item.message.message}</Text>
      </View>
    </View>
  );
}}

I strongly suggest you take a look at the structure of the response object since that's where you are failing at the moment.

来自数组React Native内的Array聊天的列表项

1 个答案: