如何映射使用axios获取的数组

Question

我正在开发一个聊天应用程序，并尝试第一次使用axios进行抓取。我已经成功地完成了fetch，因为当我console.logging它的时候，我看到了来自url的数组。但是，我希望映射数组中的所有消息，并为用户显示它们。但是我做错了什么，所以映射不起作用。有人能帮我解释一下原因吗？

这是我的代码(我相信是map-function造成了问题)：

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

看起来你把message作为数组中的一个对象。您必须检查它是否是对象，然后呈现所需的字段

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时，返回的数据位于一个名为data的对象中。就像fetch API一样，您必须将.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[]
  }