Установка состояния React в функции .map без перезаписи состояния

Новичок в javascript, и я борюсь с простым методом карты.

Я хотел бы перебрать два массива объектов и установить состояние, чтобы включить результат каждого сопоставления. В настоящее время состояние перезаписывается с каждым новым элементом.

Желаемый результат:

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"}
 ]
}

Текущий выход:

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"}
 ]
}

Код, выдавший текущий неверный вывод:

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();
  }, []);

Любая помощь могла бы быть полезна!


reactjs javascript setstate javascript-objects array.prototype.map
person BWeb303    schedule 07.11.2019    source источник
comment
почему ты спросил это дважды?   -  person Rafael Mora    schedule 07.11.2019
comment
Можете ли вы показать реализацию функции setRefData?   -  person BadPiggie    schedule 07.11.2019
comment
Я согласен, что лучший способ - полностью создать массив перед вызовом setRefData.   -  person hackerl33t    schedule 07.11.2019

Ответы (1)


arrow_upward
1
arrow_downward

Способ сделать это — сначала создать объект json, а затем установить его в состояние.

  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);
    }
    ..........
  }, []);
person Mark    schedule 07.11.2019