Reactjs useEffect作为具有多个依赖项的组件进行更新

如何有条件地更新我的状态？
如果早餐不是空的，我想更新我的早餐状态

如果午餐不是空的，我想更新我的午餐状态

如果食客不是空的，我想更新我的食客状态

如果零食不是空的，我想更新我的零食状态

import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { createStructuredSelector } from 'reselect';
import { state_breakfast, state_lunch, state_diner, state_snack } from '../../../redux/selectors/meal';

import Card from './Card';
import Buttons from './Buttons';
import isEmpty from '../../common/utils/isEmpty';

const Meals = ({ breakfast, lunch, diner, snack }) => {
  const [state, setState] = useState({ Breakfast: false, Lunch: false, Diner: false, Snack: false });
const { Breakfast, Lunch, Diner, Snack } = state;

useEffect(() => {
 if(!isEmpty(breakfast)) setState({ ...state, Breakfast: true });
},[breakfast]);

 // useEffect(() => {
 //   if(!isEmpty(breakfast)) setState({ ...state, Breakfast: true });
 //   if(!isEmpty(lunch)) setState({ ...state, Lunch: true });
 //   if(!isEmpty(diner)) setState({ ...state, Diner: true });
 // },[breakfast, lunch, diner, snack]);

  return(
    ....
  )

 const mapStateToProps = createStructuredSelector({
   breakfast: state_breakfast,
   lunch: state_lunch,
   diner: state_diner,
   snack: state_snack
  });

 export default connect(mapStateToProps, null)(Meals);

问题是，它的更新只有1个状态

欢迎任何帮助，

---

谢谢

问题是您正在为每个

设置状态

使用

状态

因此，一次过程中的所有更新都会重新使用当前的

状态

，并重置在同一过程中设置的先前值

使用

useffect（（）=>{
让更新={}；
如果（！isEmpty（updateOne））updates.one=true；
如果（！isEmpty（updatewo））updates.two=true；
如果（！isEmpty（updateTree））updates.tree=true；
如果（！isEmpty（updateFour））updates.four=true；
设定状态({
……国家，
…更新
});
}，[updateOne，UpdateVo，updateTree，UpdateFor]）；

您有两个（或更多）选项来实现这一目标：

选择1 单独处理每个状态：

const Meals = ({ breakfast, lunch, diner, snack }) => {

  const [breakfast, setBreakfast] = useState(breakfast);
  const [lunch, setLunch] = useState(lunch);
  const [dinner, setDinner] = useState(diner);
  const [snack, setSnack] = useState(snack);

useEffect(() => {
  if (breakfast) setBreakfast(true);
  if (lunch) setLunch(true);
  if (dinner) setDinner(true);
  if (snack) setSnack(true);
}, [breakfast, lunch, dinner, snack])

选择2

---

我建议使用

useReducer

，但使用传递更改的函数来处理它。

不清楚您想做什么，什么不起作用。希望现在是清楚的谢谢..现在我明白了：p，我确实喜欢spread Operator不建议使用状态。正如官方页面所说：“……另一个选项是useReducer，它更适合管理包含多个子值的状态对象。”感谢您的来电。这两个建议都比我的答案好，因为我还没有使用钩子，所以我们只是进行了明显的修复。

function reducer(state, action) {
  return { ...state, ...action };
}

const Meals = ({ breakfast, lunch, dinner, snack }) => {
  const [state, setState] = useReducer(reducer, { breakfast, lunch, diner, snack });

useEffect(() => {
  setState({ breakfast, lunch, dinner, snack });
}, [breakfast, lunch, dinner, snack])