英文:
values.map is not a function reactjs
问题
我正在从数据库中获取数据，想要将其显示在表格中，但最初我只想在浏览器中显示，而不是在表格中等等。但是我得到了一个错误 values.map is not a function，但我可以在控制台中看到值已经打印出来了。
这里是代码示例：
export default function SimpleTable() {
const [values, setValues] = useState([]);
// 获取数据的函数
async function handleTable() {
const res = await fetch("http://localhost:4000/productslist");
const data = await res.json();
setValues(data.data);
console.log(data.data);
}
// 在组件加载时调用获取数据的函数
useEffect(() => {
handleTable();
}, []);
// 在浏览器中渲染数据
return (
<div>
{console.log(values)}
{values.map(v => {
return (
<h4 key={v.idaddproducts}>
{v.productName} {v.productId} {v.productBrand}
</h4>
);
})}
</div>
);
}
请注意，我将 useState 的初始值设置为一个空数组 []，因为您想要将数据映射到表格中，所以 values 应该是一个数组而不是对象。
英文:
i am fetchin details from database wanted to display that into the table, but for initial purpose i wanted to just display on browser without table and stuff.. am getting values.map is not a function but i could the see values printed in console
here iam using function component
export default function SimpleTable() {
const [values, setValues] = useState({});
here is the fetch function
async function handleTable(){
const res = await fetch("http://localhost:4000/productslist")
const data = await res.json()
setValues(data.data)
console.log(data.data)
}
calling the fetch function on useEffect
useEffect(()=>{
handleTable()
},[])
Rendering the values into browser
return (
<div>
{console.log(values)}
{values.map(v => {
return <h4 key={v.idaddproducts}>{v.productName}{v.productId}{v.productBrand}</h4>})}
</div>
);
}
here is the error
Uncaught TypeError: values.map is not a function
答案1
得分: 3
The initial state of your values is an empty object
From
const [values, setValues] = useState({});
Update to
const [values, setValues] = useState([]);
Since Object doesn't have a method called .map
Also in your code since it's an async call, you can check based on a state whether data has loaded or not. A simple thing you can add is a ternary check:
{values.length && values.map(v => {
return <h4 key={v.idaddproducts}>{v.productName}{v.productId}{v.productBrand}</h4>;
})}
</div>
);
So once the array has a length greater than zero, only then it will execute the map function.
Working Codesandbox With Sample Example
英文:
The initial state of your values is an empty object
From
const [values, setValues] = useState({});
Update to
const [values, setValues] = useState([]);
Since Object doesn't have a method called .map
Also in your code since its a async call you can check based on a state whether data has load or not a simple thing you can add is a ternary check
{values.length && values.map(v => {
return <h4 key={v.idaddproducts}>{v.productName}{v.productId}{v.productBrand}</h4>})}
</div>
);
so once the array has a length greater than zero only it will execute the map function
Working Codesandbox With Sample Example
答案2
得分: 1
将您的状态定义为一个数组
const [values, setValues] = useState([]);
代码
{values && values.map(v => {
return (
<h4 key={v.idaddproducts}>
{v.productName}{v.productId}{v.productBrand}
</h4>
);
})}
英文:
Define your state as an array
const [values, setValues] = useState([]);
Code
{values && values.map(v => {
return <h4 key={v.idaddproducts}>
{v.productName}{v.productId}{v.productBrand}
</h4>
})
}
答案3
得分: 0
你设置了一个值{}而不是[]。
更新
const [values, setValues] = useState({});
为
const [values, setValues] = useState([]);
英文:
You set a value {} instead of [].
Update
const [values, setValues] = useState({});
to
const [values, setValues] = useState([]);
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论