Блог

У меня в приложении есть состояние, которое выглядит примерно так:

 const [companyCategories, setCompanyCategories] = useState({ loading: true, categories: null });
 

Я получаю свои категории из API и устанавливаю свои категории, как показано ниже:

   const fetchCategories = useCallback(() => {
    fetch(***link***)
      .then(res => {
        if (!res.ok) {
          throw new Error('Failed to fetch.');
        }
        return res.json()
      })
      .then(data => {
        setCompanyCategories({
          loading: false, categories: data.map((el, index) => {
            return {
              id: el.id,
              title: el.title,
              selected: false
            }
          })
        })
      })
      .catch(err => {
        console.log(err);
      });

  }, []);

 

и если я войду в свой companyCategories после этого:

 Object {
  "categories": Array [
    Object {
      "id": 7,
      "selected": false,
      "title": "Casual",
    },
    Object {
      "id": 8,
      "selected": false,
      "title": "Coffe Table",
    },
    Object {
      "id": 10,
      "selected": false,
      "title": "Dining Table",
    },
    Object {
      "id": 11,
      "selected": false,
      "title": "Workstation",
    },
  ],
  "loading": false,
}
 

и вот моя проблема : подумайте, что я показываю эти категории в виде кнопок в пользовательском интерфейсе приложения, и когда пользователь нажимает на каждую из них, она меняется по цвету, и мне нужно изменить selected атрибут категории, для true которой по умолчанию все они являются ложными, означает, что ни один не выбран.
для этого я кодирую так:

   const onRadioBtnClick = (item) => {
    let updatedState = companyCategories.categories.map((el) => {
      if (el.id == item.id) {
        return {
          ...el,
          loading: true,
          categories: {
            ...el.categories,
            selected: !el.selected
          }
        }
      }
      setCompanyCategories(updatedState)
    });
  };

 

и это не работает, мне показывает undefined updatedState . как я могу манипулировать одним свойством моего вложенного состояния?

Вы встали setCompanyCategories(updatedState) не на ту линию.

Это должно быть

 const onRadioBtnClick = (item) => {
  let updatedState = companyCategories.categories.map((el) => {
    if (el.id == item.id) {
      return {
        ...el,
        loading: true,
        categories: {
          ...el.categories,
          selected: !el.selected
        }
      }
    }
  });
  setCompanyCategories(updatedState);
};