Реагируйте, что setState перезаписывается в .map () - PullRequest
Новая
       32

Реагируйте, что setState перезаписывается в .map ()

0 голосов
/ 07 ноября 2019

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

Данные анализируются и хранятся правильно, но я бы хотел, чтобы в состоянии refData были включены все четыре результата, а не перезаписываться. 

  useEffect(() => {
    const refDataArr = [
      {
        url: "users",
        field: "user"
      },
      {
        url: "products",
        field: "product"
      },
      {
        url: "roles",
        field: "role"
      },
      {
        url: "locations",
        field: "location"
      }
    ]

    const fetchRefData = () => {
      console.log('Fetching reference data...');
      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

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

Пример журнала результатов (другие журналыпоказать пользователей, роли и т. д. Они перезаписываются): 

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

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

...etc

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

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"}
 ],
 location: [
  {key: 1, value: "A"},
  {key: 2, value: "B"}
 ]
}

1 Ответ

1 голос
/ 07 ноября 2019

Вы должны построить желаемый объект, а затем, после его полной сборки, использовать setRefData, что вам нужно. 

useEffect(() => {
    const refDataArr = [
      {
        url: "users",
        field: "user"
      },
      {
        url: "products",
        field: "product"
      },
      {
        url: "roles",
        field: "role"
      },
      {
        url: "locations",
        field: "location"
      }
    ]
    let newData = {};
    const fetchRefData = () => {
      console.log('Fetching reference data...');
      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

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