英文:
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([]);
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论