7

I'm new to React. I've a MealList component to which I'm passing a set of props, based on which it make a data call and updates an array of meals, which I display in a table.

const MealList = (props) => {
    const [meals, setMeals] = useState([]);

    useEffect(() => {

        const fetchMeals = async (userId, fromDate, toDate, fromTime, toTime) => {
            ...
            return resp;
        };
        fetchMeals(localStorage.getItem('user_id'), props.fromDate, props.toDate, props.fromTime, props.toTime).then(r => {
            setMeals([...meals, ...r.data])//The fetched data is stored in an array here.
        });
    }, [props]);
    console.log(props.fromDate);
    return (
        <div style={{width: '70%'}}>
            ...
            <Table striped bordered hover>
                <thead>
                <tr>
                    ...
                </tr>
                </thead>
                <tbody>
                {meals.map((meal, index) => (<Meal key={meal.id} count={index +1} meal={meal}/>))}//And displayed here
                </tbody>
            </Table>
        </div>

    )
};

The problem I'm facing is that using the spread syntax setMeals([...meals, ...r.data]) appends to the existing list everytime MealList is updated via the props.

My question is how can I set the meals array back to null and then update only the new values? I've tried this:

fetchMeals(localStorage.getItem('user_id'), props.fromDate, props.toDate, props.fromTime, props.toTime).then(r => {
            setMeals([]);
            setMeals([...meals, ...r.data])
        });

But this doesn't work either.

16
  • 2
    can't you try setMeals(r.data) ? Jan 1, 2020 at 19:49
  • 1
    according to me it should re-render after setMeals(r.data) is called whether it is async or sync. Jan 1, 2020 at 19:58
  • 1
    have you tried setMeals([...r.data]) ?
    – EugenSunic
    Jan 3, 2020 at 20:06
  • 3
    I believe is this less about React and more about understanding modern javascript. There is no point of calling setMeals([]) right before setMeals([...meals, ...r.data]). Just call it once with the data you want set into that state object. Jan 3, 2020 at 20:34
  • 1
    In your question, you say that the new items are being appended onto the array with the old items. Is the meals state object the old objects? If so, why are you adding it back into state along with the response? If you want to update the meal state with just the response from an api, instead of setMeals([...meals, ...resp.data]) try setMeals(resp.data) which is functionally equal to setMeals([...resp.data]). Jan 3, 2020 at 20:48

3 Answers 3

2
+200

If you want the same effect of the splicing you should use

 setMeals(r.data.slice());

as otherwise the reference to r.data is passed and it can make a difference if that object is mutated after the setMeals call.

When you pass an array to a function in Javascript the function doesn't receive a copy of the array, but a reference to the original object you passed. For example:

 let x = [1,2,3], y = null;

 function foo(xx) {
     y = xx;
 }
 foo(x);
 console.log(y); // gives [1, 2, 3]
 x[1] = 99;
 console.log(y); // gives [1, 99, 3]

Apparently the code in fetchMeals (that we don't see) reuses the r.data array and this creates the problem if you don't make a copy. I would probably classify this as a (design) bug in fetchMeals as given the interface I'd expect to get a fresh answer and not a reused one that I must copy.

Note also that

x.slice()

is the same as

[...x]
8
  • I didn't quite understand the reasoning, but trying this now. Jan 3, 2020 at 20:02
  • This works for me, can you please elaborate a little on why setMeals(r.data) didn't work. Jan 3, 2020 at 20:52
  • @MelissaStewart doing setMeals([...resp.data]) and setMeals(resp.data.splice()) both create new arrays that look the same as the original array. The reason you would do this is because in the case the response array (from resp.data) is mutated (changed/updated), the updated array object won't be affected. Jan 3, 2020 at 20:53
  • 1
    @EugeneSunic No I didn't, it just wasn't a part of the topic. In the question, the spread operator is used. I was comparing it to slice because it was used in this answer. Jan 3, 2020 at 21:01
  • tl;dr: every time you want to update array in state, you need to create a new array for the reason that React will compare your arrays by reference between re-renders. And if reference stays the same, update will likely not happen. So the suggested approaches (setMeals(r.data), setMeals(r.data.slice()), setMeals([...r.data])) will all work. Your r.data is expected to be a new object every time you receive it from the backend
    – Max
    Jan 4, 2020 at 1:42
2

Here is an example (trying to mimic your code):

Stackblitz demo: https://stackblitz.com/edit/react-hooks-usestate-svnmpn?file=MealList.js

The problem is with data mutation, you have to remain immutable if you want new changes to re-render you component and apply the update.

  const MealList = props => {
  const [meals, setMeals] = useState([]);

  useEffect(() => {
    const fetchMeals = async (userId, fromDate, toDate, fromTime, toTime) => {
      return await new Promise(res =>
        setTimeout(
          _ =>
            res({
              data: [
                { id: 1, name: "sphagetti" },
                { id: 2, name: "salad" },
                { id: 3, name: "soup" },
                { id: 4, name: "bacon and eggs" }
              ]
            }),
          2000
        )
      );
    };
    fetchMeals(1, "date1", "date2", "time", "time2").then(r =>
      setMeals([...r.data])
    );
  }, [props]);

  return (
    <div style={{ width: "70%" }}>
      {!meals.length && <p>wait 2 seconds...</p>}
      {meals.map((meal, index) => (
        <div key={meal.id} count={index + 1} meal={meal}>
          {meal.id + ". " + meal.name}
        </div>
      ))}
    </div>
  );
};
2

Can you please try this approach? I believe reducer fits into your need better than simple state changes. Keep in mind that this is simple example. You can move props into the action and do the fetching in another file to keep your component clean and separate concerns.

You can also run code snippet here: https://codesandbox.io/s/fragrant-frog-y2e6j?fontsize=14&hidenavigation=1&theme=dark

import React, { useEffect, useReducer } from "react";

const mealsReducer = ({ meals }, action) => {
  switch (action.type) {
    case "ADD_MEALS": {
      return {
        meals: action.meals
      };
    }
    // no default
  }
};
const MealList = ({ fromDate, toDate, fromTime, toTime }) => {
  const [state, dispatch] = useReducer(mealsReducer, { meals: [] });

  useEffect(() => {
    const fetchMeals = (userId, fromDate, toDate, fromTime, toTime) => {
      return Promise.resolve({
        data: [{ id: Math.floor(Math.random() * 100), name: "blabla" }]
      });
    };
    fetchMeals(0, fromDate, toDate, fromTime, toTime).then(({ data }) =>
      dispatch({ type: "ADD_MEALS", meals: data })
    );
  }, [fromDate, toDate, fromTime, toTime]);

  return (
    <ul>
      {state.meals.map((meal, index) => (
        <li key={meal.id}>{ meal.name }</li>
      ))}
    </ul>
  );
};

export default MealList;

1
  • Thank you for this. useReducer was exactly what I wanted. I think I was halfway to implementing it with useState (and had bugs in my version) until I read through your solution.
    – Eric Hu
    Sep 22, 2021 at 17:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.