values.map 不是函数 reactjs

Question

我正在从数据库中获取详细信息，希望将其显示到 table 中，但出于最初的目的，我只想在浏览器上显示而没有 table 之类的东西.. 我得到 values.map 不是函数，但我可以看到控制台中打印的值

这里我使用的是函数组件

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 上调用 fetch 函数

useEffect(()=>{
handleTable()
},[])

将值呈现到浏览器中

return (
<div>

{console.log(values)}
{values.map(v => {
return  <h4 key={v.idaddproducts}>{v.productName}{v.productId}{v.productBrand}</h4>})}
</div>
);
}

这里是错误

Uncaught TypeError: values.map is not a function

Answer 1

您设置了一个值 {} 而不是 []。更新

const [values, setValues] = useState({});

到

const [values, setValues] = useState([]);

Answer 2

将您的状态定义为数组

const [values, setValues] = useState([]);

代码

{values && values.map(v => {
  return  <h4 key={v.idaddproducts}>
           {v.productName}{v.productId}{v.productBrand} 
          </h4>
  })
 }

Answer 3

您的值的初始状态是一个空对象

来自

const [values, setValues] = useState({});

更新至

const [values, setValues] = useState([]);

因为 Object 没有名为 .map

的方法

同样在您的代码中，因为它是异步调用，您可以根据状态检查数据是否已加载，您可以添加一个简单的事情是三元检查

{values.length && values.map(v => {
return  <h4 key={v.idaddproducts}>{v.productName}{v.productId}{v.productBrand}</h4>})}
</div>
);

所以一旦数组的长度大于零，它就会执行映射函数

使用示例Codesandbox

values.map 不是函数 reactjs

values.map is not a function reactjs

reactjs

use-effect