React Не могу прочитать свойство 'map'

Question

Я использую реагирующие хуки и хочу отобразить каждое count, которое приходит из API. Но я получаю сообщение об ошибке Cannot read property 'map'

API-возврат json данные типа:

model: {
  item 1: {
    count: 200
  }
  item2: {
    count: 300
  }
  item 3: {
    count: 400
  }
}

и useEffect выглядит так:

const [results, setResults] = useStates();

 useEffects(() => {
fetch('api)
.then(results =>{
    return results.json();
}).then(data => {
    let test = data.results.map((item) => {
        return(
            <div>{test.count}</div>
        );
    });
    setResults(test);
});
});

Answer 1

.map() - это функция, присутствующая только в массивах, а не в объектах. Таким образом, для вашего случая, что вы можете сделать, это l oop с помощью клавиш и выполнить итерацию объекта.

useEffect(() => {
  fetch("api")
    .then(results => {
      return results.json();
    })
    .then(data => {
      let test = Object.keys(data.results).map((item, key) => {
        return <div key={key}>{data.results[item].count}</div>;
      });
      setResults(test);
    });
});

И еще одна вещь, это useEffect и useState(), вы оставили ', переменная test отсутствует. Не забудьте указать key при отображении. Я исправил все ошибки в вашем коде выше.

Answer 2

Вы можете использовать Object.values() и Array.map() примерно так:

const data = {
  model: {
    item1: {
      count: 200
    },
    item2: {
      count: 300
    },
    item3: {
      count: 400
    }
  }
};

console.log(Object.values(data.model).map(({
  count
}) => count));

Обратите внимание, что вы хотите получать данные только при монтировании useEffect(fn,[]), а также не рекомендуется сохранять сам компонент как состояние, отображать его в зависимости от данных. :

const App = () => {
  const [results, setResults] = useStates([]);
  useEffect(() => {
    fetch('api')
      .then(results => {
        return results.json();
      })
      .then(data => {
        setResults(Object.values(data.model).map(({ count }) => count));
      });
  }, []);

  return results.map((count,key)=> <div key={key}>{count}</div>);
};