Question

我最近开始尝试学习React钩子，但是对于我一生来说，我无法弄清楚某些事情，例如多状态管理，我找到了一些例子，但是似乎没有什么是特定的模式。我什至不知道如果有两个以上的状态，您应该如何定义状态，并且您想单独更改它们，就像这样：

const [slides, setSlides] = useState([])
const [currentSlide, setCurrentSlide] = useState(0)
const [tagName, setTagName] = useState([])

或者这样：

const [states, setStates] = useState({
  slides: [],
  currentSlide: 0,
  tagName: []
})

并且如果两个或第二个都是可行的（老实说，我宁愿选择第二个，因为它在调用useState时重复性较小，并且更接近于标准状态元），在这样的示例中，如何改变状态？我真的找不到任何东西，所以我尝试的是这样：

useEffect(() => {
  Object.entries(Slides).forEach(slide => {
   setStates(prevState => ({ slides: [...prevState.slides, slide[1]] }))
  })

}, [])

我把它弄乱了，试图得到一些不错的结果，但是我无法使其正常工作。

任何关于我做错事情的想法吗？以及哪种方法是最佳实践？

谢谢！

Answer 1

就更新状态而言，第一个模板非常简单，因为每个stateUpdate函数将负责更新单个值，该值可以为obj/array/int/bool/string。另一件事是，要访问状态的每个值（它将是一个对象），您需要编写states.slides，states.tagName等。

在第一种情况下，状态更新将很简单：

// only value in case of int/string/bool
updateState({ [key]: value }) or updateState(value);

但是在第二种情况下，状态将是具有多个键的对象，因此要更新任何单个值，您需要复制该对象，然后传递更新的键值。像这样：

updateState({
  ...obj,
  [key]: newValue
})

要更新幻灯片数组，请执行以下操作：

updateState(prevState => ({
  ...prevState,
  slides: newArray
}))

处理复杂状态更新：

使用useReducer处理复杂的状态更新，编写具有操作类型和每种操作类型的单独的reducer函数，以便计算并返回新状态。

例如：

const initialState = { slides: [], tagName: [], currentSlide: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'SLIDES':
      return { ... };
    case 'TAGNAME':
      return { ... };
    case 'CURRENT_SLIDE':
      return { ... }
    default:
      throw new Error();
  }
}

function Counter({initialState}) {
  const [state, dispatch] = useReducer(reducer, initialState);
  ....
}

Answer 2

确实，useState钩子在处理复杂的状态对象时可能变得非常冗长。在这种情况下，您还可以考虑使用useReducer挂钩。

我建议阅读this article关于useState与useReducer的关系。

管理挂钩内的多个状态

2 个答案: