Реагировать на useEffect с объектом - PullRequest
Новая
       79

Реагировать на useEffect с объектом

0 голосов
/ 09 мая 2020

Я пытаюсь обновить состояние. Я читал, что, чтобы не заменять состояние полностью, необходимо использовать оператор распространения. Это своего рода работа, поскольку она добавляется к предыдущему состоянию, но я изо всех сил пытаюсь добавить состояние в нужное место. Приведенный ниже код обновляет состояние для «категорий», но делает это на том же уровне, что и «all_categories» и «current_category». Я бы хотел, чтобы полученный объект был помещен в all_categories. Спасибо. 

 const [ categories, setCategory ] = useState({
    all_categories: [],
    current_category: 'Cocktail'
  });
  const [recipes, setRecipe] = useState([]);

  useEffect(() => {
    Promise.all(
      [
        fetch(`https://the-cocktail-db.p.rapidapi.com/filter.php?c=${categories['current_category']}`, {
          "method": "GET",
          "headers": {
            "x-rapidapi-host": "the-cocktail-db.p.rapidapi.com",
            "x-rapidapi-key": "xxx"
          }
        }),
        fetch("https://the-cocktail-db.p.rapidapi.com/list.php?c=list", {
          "method": "GET",
          "headers": {
            "x-rapidapi-host": "the-cocktail-db.p.rapidapi.com",
            "x-rapidapi-key": "xxx"
          }
        })
      ]
    )
    .then(([response1, response2]) => {
      return Promise.all([response1.json(), response2.json()])
    })
    .then(([drinks_data, categories_data]) => {
      setRecipe(drinks_data['drinks'])
      setCategory(prev_state => {
        return {...prev_state, ...categories_data['drinks']};
      });
    })
    .catch(err => { console.log(err); });
  },[]);

Ответы [ 2 ]

1 голос
/ 09 мая 2020

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

 setCategory(prev_state => {
    return {
       ...prev_state,
       all_categories: [
           ...prev_state.all_categories,
           ...categories_data['drinks']
       ]
    };
  });
0 голосов
/ 09 мая 2020

Теперь у вас есть 2 переменные внутри категорий (all_categories, current_category), и вы можете обновить их с помощью функции setCategory, скажем, если вы хотите обновить только текущую категорию, тогда это будет выглядеть ниже 

setCategory({...rest, {current_category: 'Vodka'}})

теперь вы мутируете объект current_category внутри состояния категорий и остальные остаются такими же, так же, как вы можете делать остальные переменные внутри состояния, и если вы попытаетесь изменить несуществующую переменную, он создаст новую переменную внутри состояния,

посмотрим, как можно добавить значение ответа из api в all_categories, 

setCategory({...rest, {all_categories:[drinks_data]})
...