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

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([]);

Поскольку у объекта нет метода с именем .map

Также в вашем коде, поскольку это асинхронный вызов c, вы можете проверить на основе состояния, загружены ли данные или нет, простая вещь, которую вы можете добавить, является троичной проверкой

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

поэтому, если длина массива больше нуля, он будет выполнять только функцию map

Working Codesandbox с примером примера

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([]);