“TypeError：listOfTours.map 不是函数”，同时尝试在反应中显示获取的数据

Question

I'm struggling since two days on this and afters hours of trial and error I couldn't solve it.

What I'm trying to achieve is that I can display my fetched data, which I get from my backend. I saw several example on different websites, but I can't get it to work.

Here is my code and the error I get:

function Tours({ isAuth: isAuth, component: Component, ...rest }) {
  const [listOfTours, setListOfTours] = useState([]);
  console.log(listOfTours);

  const getAllTours = () =>
    axios
      .get("/api/all-tours", {
        headers: {
          "x-access-token": localStorage.getItem("token"),
        },
      })
      .then((response) => {
        if (response.data.status === "error") {
          console.log(response.data.status);
        } else {
          setListOfTours(response.data);
        }
      });

  useEffect(() => {
    getAllTours();
  }, []);

  if (listOfTours.length > 0) {
    return (
      <div>
        <div className="tourDisplay">
          {listOfTours.map((tour) => {
            return (
              <div>
                <div>Tourname: {tour.tour_name}</div>
                <div>...other values</div>
              </div>
            );
          })}
        </div>
      </div>
    );
  } else {
    return (
      <div>
        <p>Loading...</p>
      </div>
    );
  }
}

export default withRouter(Tours);

TypeError: listOfTours.map is not a function
Tours
src/components/tours.js:32
  29 | if (listOfTours.length > 0) {
  30 |   return (
  31 |     <div>
> 32 |       <div className="tourDisplay">
     | ^  33 |         {listOfTours.map((tour) => {
  34 |           return (
  35 |             <div>

I think it has something to do with the asynchronous call and that.map can't process with empty array. Therefor, I use the if statement in front of the return, but it also won't work.

Does someone have any idea, or am I missing something?

Answer 1

Try to make the getAllTours function as a Promise .

...
const [listOfTours, setListOfTours] = useState(null);

const getAllTours = async () => {
  try {
    // not sure if /api/all-tours is the proper API source
    const tours = await axios.get("/api/all-tours", {
        headers: {
          "x-access-token": localStorage.getItem("token"),
        },
    });

    // try to console.log here to make sure if the tours has responded successfully and what type of the tours.response.data has either object or array
    console.log(tours.response);
    console.log(typeof tours.response.data);

    // this seems to be tours.response without data
    if (tours.response.data) { // if (tours.response) {
      // if tours.response.data is a type string, then convert it to json object
      // setListOfTours(JSON.parse(tours.response.data));
      setListOfTours(tours.response.data);
      // setListOfTours(tours.response);
    }
  } catch (err) {
    console.error(err);
  }
}

  useEffect(() => {
    getAllTours();
  }, [getAllTours]);

  return (
    <div>
      {
        !listOfTours
          ? // loading div
          : <div className="tourDisplay">
          {listOfTours.length > 0 && listOfTours.map((tour) => {
            return (
              <div>
                <div>Tourname: {tour.tour_name}</div>
                <div>...other values</div>
              </div>
            );
          })}
        </div>
      }
    </div>
  );

If this doesn't work, please inspect the browser and go to the network tab, and then make sure the API worked properly.

Answer 2

I don't know is your response.data array or not but if it is array I can write down some solutions and you can try all of them

Check is array empty or not

as I can read in your code you check is your array true or false , which is wrong because javscript never reads array inside, you can try it on your own [] == [] is false so every time when you fetch data you keep your state empty because your if statement always returns false best way to check is array empty or not you can check its length

wrong

if (tours.response.data) { //it always returns false
    setListOfTours(tours.response.data);
}

and also will be better if you check is your response data undefined or not

better

if (tours.response.data.length > 0 || !tours.response.data === undefined) {
    setListOfTours(tours.response.data);
}

Set default value before fetch

when you fetch data your state is always [] empty array and it never can read inside value if you will try to print in console listOfTours.tour_date you will get cannot read properties of null (reading 'tour_date') so before fetching the data create empty object with strins something like that

const defaultState = {
  "tour_date": "",
  "tour_distance": 0,
  "tour_duration": 0,
  "tour_elevation_down": 0,
  "tour_elevation_up": 0,
  "tour_name": "",
  "tour_sport": ""
}

const [listOfTours, setListOfTours] = useState([defaultState]);

and that code will relax your react and won't to pop up error, what I mentioned in start of null property

and you can make simple ternary operator to do not .map() elements if you state has default value

!listOfTours[0].tour_date === "" ?
listOfTours.map(each => {
   return <div>...</div>
}) : null

Spread Operator

the last way to fix that issue I don't think it will work but I will include that one too, if your response is really array and react can't recognize it you can you spread operator

if (tours.response.data.length > 0 || !tours.response.data === undefined) {
      setListOfTours([...tours.response.data]);
}

this code will put all the object in you array and it will update the state

If some of them will work let me know