您还可以使用useEffect来检测状态变化，并相应地更新其他状态值

这也有另一个解决方案使用useReducer!首先，我们定义新的setState。

const [state, setState] = useReducer(
  (state, newState) => ({...state, ...newState}),
  {loading: true, data: null, something: ''}
)

之后，我们可以像使用老类this一样简单地使用它。setState，只是没有this!

setState({loading: false, data: test.data.results})

正如您可能注意到的，在我们的新setState中(就像我们之前在this.setState中一样)，我们不需要一起更新所有的状态!例如，我可以像这样改变我们的一个状态(它不会改变其他状态!):

setState({loading: false})

Awesome,哈? !

所以让我们把所有的片段放在一起:

import {useReducer} from 'react'

const getData = url => {
  const [state, setState] = useReducer(
    (state, newState) => ({...state, ...newState}),
    {loading: true, data: null}
  )

  useEffect(async () => {
    const test = await api.get('/people')
    if(test.ok){
      setState({loading: false, data: test.data.results})
    }
  }, [])

  return state
}

打印稿的支持。 感谢P. Galbraith，他给出了这个解决方案， 那些使用typescript的人可以使用这个:

useReducer<Reducer<MyState, Partial<MyState>>>(...)

其中MyState是状态对象的类型。

例:在我们的例子中，它是这样的:

interface MyState {
   loading: boolean;
   data: any;
   something: string;
}

const [state, setState] = useReducer<Reducer<MyState, Partial<MyState>>>(
  (state, newState) => ({...state, ...newState}),
  {loading: true, data: null, something: ''}
)

以前的国家支持。 在评论中，user2420374要求一种方法来访问setState中的prevState，所以这里有一种方法来实现这个目标:

const [state, setState] = useReducer(
    (state, newState) => {
        newWithPrevState = isFunction(newState) ? newState(state) : newState
        return (
            {...state, ...newWithPrevState}
        )
     },
     initialState
)

// And then use it like this...
setState(prevState => {...})

isFunction检查传递的参数是一个函数(这意味着您正在尝试访问prevState)还是一个普通对象。你可以在这里找到Alex Grande对isFunction的实现。

通知。对于那些想要经常使用这个答案的人，我决定把它变成一个图书馆。你可以在这里找到它:

Github: https://github.com/thevahidal/react-use-setstate

NPM: https://www.npmjs.com/package/react-use-setstate

您还可以使用useEffect来检测状态变化，并相应地更新其他状态值

你可以将加载状态和数据状态合并到一个状态对象中，然后你可以做一个setState调用，只会有一个呈现。

注意:与类组件中的setState不同，useState返回的setState不会将对象与现有状态合并，它会完全替换对象。如果希望进行合并，则需要读取之前的状态，并自己将其与新值合并。参考文档。

在确定有性能问题之前，我不会太担心过度调用渲染。渲染(在React上下文中)和将虚拟DOM更新提交到真实DOM是不同的事情。这里的呈现指的是生成虚拟DOM，而不是更新浏览器DOM。React可以批处理setState调用，并使用最终的新状态更新浏览器DOM。

const {useState, useEffect} = React; function App() { const [userRequest, setUserRequest] = useState({ loading: false, user: null, }); useEffect(() => { // Note that this replaces the entire object and deletes user key! setUserRequest({ loading: true }); fetch('https://randomuser.me/api/') .then(results => results.json()) .then(data => { setUserRequest({ loading: false, user: data.results[0], }); }); }, []); const { loading, user } = userRequest; return ( <div> {loading && 'Loading...'} {user && user.name.first} </div> ); } ReactDOM.render(<App />, document.querySelector('#app')); <script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script> <div id="app"></div>

替代方案-编写自己的州合并钩子

const {useState, useEffect} = React; function useMergeState(initialState) { const [state, setState] = useState(initialState); const setMergedState = newState => setState(prevState => Object.assign({}, prevState, newState) ); return [state, setMergedState]; } function App() { const [userRequest, setUserRequest] = useMergeState({ loading: false, user: null, }); useEffect(() => { setUserRequest({ loading: true }); fetch('https://randomuser.me/api/') .then(results => results.json()) .then(data => { setUserRequest({ loading: false, user: data.results[0], }); }); }, []); const { loading, user } = userRequest; return ( <div> {loading && 'Loading...'} {user && user.name.first} </div> ); } ReactDOM.render(<App />, document.querySelector('#app')); <script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script> <div id="app"></div>

批处理更新在react-hooks https://github.com/facebook/react/issues/14259

React目前会批处理状态更新，如果它们是在一个基于React的事件中触发的，比如按钮点击或输入更改。如果它们是在React事件处理程序之外触发的，就像异步调用一样，它不会批量处理更新。

除了Yangshun Tay的答案，你最好记住setMergedState函数，这样它每次渲染都会返回相同的引用，而不是新函数。如果TypeScript linter强迫你在useCallback或父组件useEffect中传递setMergedState作为依赖项，这可能是至关重要的。

import {useCallback, useState} from "react";

export const useMergeState = <T>(initialState: T): [T, (newState: Partial<T>) => void] => {
    const [state, setState] = useState(initialState);
    const setMergedState = useCallback((newState: Partial<T>) =>
        setState(prevState => ({
            ...prevState,
            ...newState
        })), [setState]);
    return [state, setMergedState];
};