Как сделать .map () через массив объектов в React

Question

Я пытаюсь отобразить некоторые данные, которые выглядят следующим образом:

[
{
  "id": "cambridgeshire",
  "name": "Cambridgeshire"
},
{
  "id": "bedfordshire",
  "name": "Bedfordshire"
}
]

И отобразить их в виде списка.

Я получаю сообщение об ошибке allAreas не определено. Я чувствую, что это из-за объекта JSON, с которым я не знаком.

При проверке состояния всех областей он показывает неопределенное.

Вот код, который я пробовал

const Directory = () => {
  const [allAreas, setAllAreas] = useState([]);

  useEffect(() => {
    fetchAllAreasData().then((data) => setAllAreas(data));
  }, []);
  return (
    <div className='directory'>
      <ul>
        {allAreas.map((area) => (
          <li key={area.id}>{area.name}</li>
        ))}
      </ul>
    </div>
  );
};

Для пояснения это массив объектов

Answer 1

Убедитесь, что allArea существует перед отображением.

const Directory = () => {
  const [allAreas, setAllAreas] = useState([]);

  useEffect(() => {
    fetchAllAreasData().then((data) => setAllAreas(data));
  }, []);
  return (
    <div className='directory'>
      <ul>
        {allAreas && allAreas.map((area) => (
          <li key={area.id}>{area.name}</li>
        ))}
      </ul>
    </div>
  );
};

Если ваша проблема не устранилась, используйте взамен useReducer из-за некоторых проблем реагирования в useState с массивами иногда. Примерно так:

function reducer(state = [], action) {
 return action;
}

const Directory = () => {
  const [allAreas, dispatch] = useReducer(reducer, []);

  useEffect(() => {
    fetchAllAreasData().then((data) => dispatch(data));
  }, []);
  return (
    <div className='directory'>
      <ul>
        {allAreas.length > 0 && allAreas.map((area) => (
          <li key={area.id}>{area.name}</li>
        ))}
      </ul>
    </div>
  );
}; 

Answer 2

Это может быть проблемой, потому что ваша функция карты вызывается до того, как обещание разрешено, и вы получаете данные.

Чтобы избежать этого, проверьте длину 'allAreas' перед итерацией по ней.

Кроме того, начальные значения, присвоенные объекту 'allAreas' вместо массива. Изменить начальное присвоение массиву.

const Directory = () => {
  const [allAreas, setAllAreas] = useState([]);

  useEffect(() => {
    fetchAllAreasData().then((data) => setAllAreas(data));
  }, []);
  return (
    <div className='directory'>
      <ul>
        {allAreas.lenght && allAreas.map((area) => (
          <li key={area.id}>{area.name}</li>
        ))}
      </ul>
    </div>
  );
};

Answer 3

попробуй,

 <ul>
     {allAreas && allAreas.map((area) => (
         <li key={area.id}>{area.name}</li>
     ))}
 </ul>

Answer 4

Просто измените первую строку функции на:

const [allAreas, setAllAreas] = useState([]);

Answer 5

const [allAreas, setAllAreas] = useState([]); // your defaulted state must be [] instead of {}