如何通过 React 中的对象数组 .map()

Question

I'm trying to map through some data that looks like this:

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

And display it as a list.

I'm getting the error of allAreas is undefined. I have a feeling its because of the JSON Object which I'm unfamiliar with.

On checking the state of allAreas it shows undefined.

Heres the code Ive tried

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>
  );
};

To clarify this is an array of objects

Answer 1

Make sure the allArea exists before mapping.

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>
  );
};

If your problem didn't fix, use the useReducer instead because of some react problems in useState with arrays in sometimes.something like this:

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

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

Answer 3

只需将函数的第一行更改为：

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

Answer 4

It may be issue because your map function gets called before promise resolved and you get data.

To avoid this please check the length of 'allAreas' before iterating over it.

Also the intitial values assigned to 'allAreas' object instead of array. Change initial assignment to an array.

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 5

try,

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