如何用reactJs显示数据?

Question

我使用ReactJs与Laravel作为API。我想显示一些数据，但没有为我工作。

这是API的结果:

{
"user_id": 2,
"id": 1,
"chat": [
{
"sender_id": 3,
"message": "Hi"
},
{
"sender_id": 4,
"message": "Hello"
}
]
}

当我尝试显示user_id时，它显示了它，但其他部分，聊天，没有显示。

我是这样使用API的:

const [chatsData, setChats] = useState([]);
// ** Renders Chat
useEffect(() => {
getChats()
}, []);
const getChats = async () => {
const response = await axios.get(`${API_ENDPOINT}/api/listChats`);
setChats(response.data);
}
<ul className='chat-users-list chat-list media-list'>
{chatsData.map((item) => {
return (
<>
<Avatar img={item?.senders?.user_image} imgHeight='42' imgWidth='42' />
<li><h5>{item.chat?.message}</h5></li>
</>
)
})}
</ul>

如果有人能帮助我，我会非常感激。

Answer 1

您只需在chat字段上循环，如:

import React from 'react';
export default function App() {
const response = {
user_id: 2,
id: 1,
chat: [
{
sender_id: 3,
message: 'Hi',
},
{
sender_id: 4,
message: 'Hello',
},
],
};
return (
<div>
<ul className="chat-users-list chat-list media-list">
{response.chat?.map((item) => {
return (
<>
<li>
<h5>
{item.sender_id} :  {item?.message}
</h5>
</li>
</>
);
})}
</ul>
</div>
);
}

这里的代码示例