我在用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.
这个错误我得到当我尝试转换数据到数组
1条答案
按热度按时间8yparm6h1#
我解决的问题是我的console.log输出
我有一个对象,它有一个名为result的属性,它是一个数组,因此我们必须这样做,我们必须用数据对象访问result数组,然后Map它来显示项目
下面是如何做到这一点