将 useEffect 与对象反应

Question

我正在尝试更新状态。我一直在读到，为了不完全替换状态，需要使用扩展运算符。它在附加到以前的状态时有点工作，但我正在努力将状态附加到正确的位置。下面的代码更新 'categories' 的状态，但它在与 '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); });
  },[]);

Answer 1

您必须更新类别状态中的 all_categories 键并使用如下扩展语法合并各个类别值

 setCategory(prev_state => {
    return {
       ...prev_state,
       all_categories: [
           ...prev_state.all_categories,
           ...categories_data['drinks']
       ]
    };
  });

Answer 2

现在您在类别中有 2 个变量（all_categories，current_category），您可以使用 setCategory 函数更新它，假设您只想更新当前类别，那么它如下所示

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

现在你改变类别状态中的 current_category 对象，其余的保持不变，你可以用同样的方式改变状态中的其余变量，如果你试图改变不存在的变量，那么它会在状态中创建新变量，

让我们看看如何将 api 的响应值添加到 all_categories、

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

将 useEffect 与对象反应

React useEffect with an object

reactjs

use-effect