TypeError：data.map 不是 React 和 django 中的函数

Question

我正在使用 Axios 从后端检索数据。当我将数据记录到控制台时，它显示为一个对象。但是，我需要数据采用数组格式。当我尝试对数据使用 map 函数时，它给我一个错误，指出 data.map 不是函数。我在后端使用 django

function Search() {
  const [data,setData] = useState([]) // setting data as array i had also used null here
  useEffect(()=>{
    axios.get("http://127.0.0.1:8000/api/listing") //using axios api
    .then(response =>{
      setData(response.data)
      console.log(response.data) //data is appears as object when do console.log
    })
    .catch(error =>{
      console.log("Error fetching data:",error)
    });
  },[]);
  return (
    <div>
      <h1>Fetched Data</h1>
      {/* <ul>
//data.map is not a function
        {data.map(item =>(
          <li key={item.id}>{item.title}</li>
        ))}
      </ul> */}
    </div>
  )
}

export default Search

我检查了后端的数据是否是数组或对象的形式，我发现数据不是数组的形式

if (Array.isArray(response.data)) {
          setData(response.data);
        } else {
          console.error('Data is not an array:', response.data);
        }

之后我尝试用两种方式将数据转换为数组

.then((response) => {
//if data is not in array convert it into array 
        const dataArray = Array.isArray(response.data) ? response.data : [response.data];
        setData(dataArray);
      })
      .catch((error) => {
        console.error('Error fetching data:', error);
      });

另一种方式

<ul>
        {[data].map((item) => (
          <li key={item.id}>{item.title}</li>
        ))}
      </ul>

但是两种方式我都收到了警告

Each child in a list should have a unique "key" prop.

当我尝试将数据转换为数组时出现此错误

Answer 1

我在这里解决了问题，这是我的 console.log 输出

结果 : Array(2) 0 : {title: '营销基础知识', 作者: 2, is_published: true, slug: '营销'} 1 : {title: 'CIA traid', 作者：1，is_published：true，slug：'cia-traid'}

我有一个对象，它有一个名为 result 的属性，它是一个数组，因此我们必须执行类似的操作，我们必须使用数据对象访问结果数组，然后映射它以显示项目

这是如何做到这一点

{data.result.map((item) => ( {项目.标题} ))}