如何在使用 axios 获取的数组上进行 map

Question

我正在开发一个聊天应用程序，并尝试首次使用 axios 进行获取。 我成功地进行了提取，因为当我控制台记录它时，我看到了来自 url 的数组。 但是我想对数组中的所有消息进行 map 并将它们显示给用户。 但是我做错了，所以映射剂量起作用。 有人可以帮我看看为什么吗？

这是我的代码（我相信它是造成问题的地图功能）：

import React, { useState, useEffect } from 'react'
import { BrowserRouter, Switch, Route } from 'react-router-dom'
import axios from 'axios'


export const GetMessages = () => {
  const [userName, setUserName] = useState([]);
  const [userMessage, setUserMessage] = useState([]);

  const fetchResponse = async () => {
    try {
      const getResponse = await axios.get(
      'http://167.172.108.61/?storage=camilla_lofroth'
    )
    console.log(getResponse)
    setUserMessage(getResponse)
    } catch (error) {
      alert('Error')
    }
    return[]
  }  

  useEffect(() => {
    fetchResponse()
  }, [])

  console.log(userMessage)

  return (
    <div>
      {userMessage.map(message => (
        <p>{message.message}</p>
      ))}
    </div>
  )
  }

Answer 1

数组中的一些响应是 object，这使得 React 无法渲染。 第 3 项至第 5 项。

[
    {
        "message": "hej test"
    },
    {
        "message": "hej test",
        "id": "1"
    },
    {
        "message": {
            "mess": "Hi",
            "status": true
        }
    },
    {
        "message": {
            "mess": "Hi",
            "status": true
        }
    },
    {
        "message": {
            "mess": "Hi",
            "status": true
        }
    }
]

Answer 2

似乎您在数组中有消息作为 object 。 您必须检查其是否为 object，然后呈现必填字段

import React, { useState, useEffect } from 'react'
import { BrowserRouter, Switch, Route } from 'react-router-dom'
import axios from 'axios'


export const GetMessages = () => {
  const [userName, setUserName] = useState([]);
  const [userMessage, setUserMessage] = useState([]);

  const fetchResponse = async () => {
    try {
      const getResponse = await axios.get(
      'http://167.172.108.61/?storage=camilla_lofroth'
    )
    console.log(getResponse)
    setUserMessage(getResponse)
    } catch (error) {
      alert('Error')
    }
    return[]
  }  

  useEffect(() => {
    fetchResponse()
  }, [])

  console.log(userMessage)

  return (
    <div>
      {userMessage.map(message => (
        <p>{message.message !== null && typeof message.message === 'object'? message.message.mess: message.message }</p>
      ))}
    </div>
  )
}

Answer 3

实际上，当您使用 axios 时，返回的数据在称为数据的 object 内部。 就像获取 API 一样，您必须将 .json .json()添加到响应中，您还必须从 axios 响应中解构数据。

在你的情况下，它应该是这样的

const fetchResponse = async () => {
    try {
      const getResponse = await axios.get(
      'http://167.172.108.61/?storage=camilla_lofroth'
    )
    Const data = await getResponse.data
    Console.log(data)
    setUserMessage(data)
    } catch (error) {
      alert('Error')
    }
    return[]
  }