values.map 不是函数 reactjs

Question

我正在从数据库中获取详细信息，希望将其显示到表格中，但出于最初的目的，我只想在没有表格和内容的浏览器上显示。我正在获取值。地图不是一个函数，但我可以看到打印的值在控制台中

这里我使用函数组件

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