Setting React state in .map function without overwriting state

Question

New to javascript and I'm struggling with a simple map method.

I'd like to iterate over two arrays of objects, and set state to include the result of each mapping. Currently, state is being overwritten with each new item.

Desired output:

refData = {
 user: [
  {key: 1, value: "A"},
  {key: 2, value: "B"}
 ],
 product: [
  {key: 1, value: "A"},
  {key: 2, value: "B"}
 ],
 role: [
  {key: 1, value: "A"},
  {key: 2, value: "B"}
 ]
}

Current output:

refData = {
 user: [
  {key: 1, value: "A"},
  {key: 2, value: "B"}
 ]
}

refData = {
 product: [
  {key: 1, value: "A"},
  {key: 2, value: "B"}
 ]
}

refData = {
 role: [
  {key: 1, value: "A"},
  {key: 2, value: "B"}
 ]
}

Code that produced the current, incorrect output:

const [refData, setRefData] = React.useState();

  useEffect(() => {

    const refDataArr = [
      { url: "users", field: "user" },
      { url: "products", field: "product" },
      { url: "roles", field: "role" }
    ]

    const fetchRefData = () => {
      try {
        refDataArr.map(async (o, index) => {
          let url = o.url
          let field = o.field
          const res = await axios.get(`http://.../${url}/ `);
          const data = res.data.data

          const resArr = Object.values(data).map((item, index) => {
            return {
              key: item._key,
              value: item[field]
            }
          });
          setRefData({  //overwritten with each returned item
            ...refData, 
            [field]: resArr, 
          })
        })
      } catch (err) {
        console.log(err);
      }
    }
    fetchRefData();
  }, []);

Any help would be really appreciated!

I agree a better way is to build up the array entirely before calling setRefData. — hackerl33t
– hackerl33t, Commented Nov 7, 2019 at 4:14

Mark · Accepted Answer · 2019-11-07 06:09:54Z

1

A way to do that is to build the json object first and then set that to the state.

  React.useEffect(() => {
    ..........
    let newRefData = {};
    ..........
    try {
      refDataArr.map(async(o, index) => {
          let url = o.url
          let field = o.field
          const res = await axios.get(`http://.../${url}/ `);
          const data = res.data.data

        const resArr = Object.values(data).map((item, index) => {
          return {
            key: item._key,
            value: item[field]
          };
        });
        newRefData[field] = resArr;
      });
      setRefData(newRefData);
    } catch (err) {
      console.log(err);
    }
    ..........
  }, []);

edited Nov 7, 2019 at 6:09

answered Nov 7, 2019 at 4:09

Mark

8376 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Setting React state in .map function without overwriting state

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related