我在用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.这个错误我得到当我尝试转换数据到数组