Javascript 用于从阵列内部的阵列聊天的列表项React Native

这是我的聊天室代码，我有“输入”和“输出”信息的窗口正在出现

import React，{Component}来自“React”；
进口{
样式表，
文本
看法
可触摸不透明度，
文本输入，
平面列表，
站台
异步存储
}从“反应本族语”；
从“./image/krutika.jpg”导入导师；
进口{
容器
标题，
左边
输入
身体
正当
缩略图，
按钮
}来自“本土基地”；
从“反应本机矢量图标/FontAwesome”导入FontAwesome；
从“反应本机向量图标/Ionicons”导入Ionicons；
从“react native vector icons/Fontsome”导入Icon1；
从“axios”导入axios；
导出默认类ChatBox扩展组件{
静态导航选项={
标题：空
};
状态={
小组成员：[]，
学生id：空
};
renderDate=日期=>{
返回{date}；
};
组件将装入=（）=>{
这是加载（）；
const{navigation}=this.props；
groupName=navigation.getParam（“groupName”）；
group_id=navigation.getParam（“group_id”）；
};
加载=异步（）=>{
const userid=await AsyncStorage.getItem（“用户id”）；
this.state.student_id=userid；
试一试{
让{data}=等待axios.get（'https://www.qualpros.com/chat/imApi/getMessage?groupId=6&limit=10&start=0&userId=62）。然后（响应=>{
//console.log（响应）
如果（response.status==200）{
this.setState（{group_msgs:response.data.response.message}）；
日志（response.data.response）
}否则{
}
});
}捕捉（错误）{
控制台日志（err）；
}
};
render（）{
返回(
this.props.navigation.navigate（“聊天屏”）}
>
{
this.props.navigation.navigate（“Groupmembers”{
组id：组id，
groupname:groupname，
});
}}
风格={{
alignSelf:Platform.OS==“安卓”？“中心”：空，
尺寸：17，
颜色：“fff”
}}
>
{groupName}
{
这个.props.navigation.navigate（“TutorCalender”）；
}}
>
{
返回项目。m_id；
}}
renderItem={message=>{
控制台日志（项目）；
const item=message.item；
让inMessage=（item.sender==this.state.userid）？'in'：'out'；
让itemStyle=inMessage？styles.itemIn:styles.itemOut；
返回(
{item.message}
);
}}
/>
this.setState（{name\u address}）
/>
{/* 
style={styles.iconSend}/>
*/}
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1
},
名单：{
水平方向：17
},
页脚：{
flexDirection:“行”，
身高：60，
背景色：“eeeeee”，
水平方向：10，
填充：5
},
BTN发送：{
//颜色：“d91009”，
宽度：40，
身高：40，
边界半径：360，
对齐项目：“中心”，
为内容辩护：“中心”
},
iconSend：{
宽度：30，
身高：30，
自我定位：“中心”
},
输入容器：{
borderBottomColor:#F5FCFF“，
背景颜色：“FFFFFF”，
边界半径：30，
边界宽度：1，
身高：40，
flexDirection:“行”，
对齐项目：“中心”，
弹性：1，
marginRight:10
},
投入：{
身高：40，
marginLeft:16，
borderBottomColor:#FFFFFF“，
弹性：1
},
气球：{
最大宽度：250，
填充：15，
边界半径：20
},
项目名称：{
alignSelf：“灵活启动”，
背景色：“eeeeee”
},
详情：{
alignSelf：“柔性端”，
背景颜色：“DCF8C5”
},
时间：{
alignSelf：“柔性端”，
差额：15，
尺寸：12，
颜色：“808080”
},
项目：{
Margin:14，
弹性：1，
flexDirection:“行”，
边界半径：300，
填充：1
}
});在代码中对端点执行GET请求时，响应如下所示：

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

在
response
对象中有一个消息对象数组，因此在设置状态时不能使用
response.data.response.message
。这部分代码需要：

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

现在，您应该能够遍历
group\u msgs
对象，以获取数组中每个项的
消息
键值

在
FlatList
组件中，您也应该有

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

您的
renderItem
似乎也有错误，请参见以下内容：

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

renderItem={（{item}）=>{
let inMessage=（item.sender.usedId==this.state.userid）？“in”：“out”；
让itemStyle=inMessage？styles.itemIn:styles.itemOut；
返回(
{item.message.message}
);
}}

我强烈建议您查看响应对象的结构，因为这是您目前失败的地方
 你能分享一下服务的回应吗？请看一看我也做了同样的事情，但是消息没有出现，如果你能帮我解决这个问题，我想我在定义平面列表时犯了一个错误that@KedarDavekeyExtractor应该是item.message.m_id。我已经更新了答案。看起来你的渲染也是错误的。你能帮我如何根据senderid左右设置它吗？Userid是key@KedarDave嗯……你是说聊天泡泡的位置？让itemStyle=inMessage？styles.itemIn:styles.itemOut；这是你的密码。这总是真的。因此，将上面的行更改为让inMessage=（item.sen