values.map 不是一个函数 reactjs

IT技术 reactjs use-effect
2021-05-25 16:18:09

我正在从数据库中获取详细信息想要将其显示到表格中，但出于最初的目的，我只想在没有表格和内容的浏览器上显示......我正在获取 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
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>
);

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

带有示例示例的工作代码沙盒

将您的状态定义为数组 

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

代码

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

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

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

到

const [values, setValues] = useState([]);
其它你可能感兴趣的问题
上一篇带有材质 ui 和 Reactjs 的嵌套侧边栏菜单 下一篇html 标签属性“data-setbg”在 React 项目中不起作用