实际上，forceUpdate()是唯一正确的解决方案，因为如果在shouldComponentUpdate()中实现了额外的逻辑，或者当它只是返回false时，setState()可能不会触发重新呈现。

强制更新（）

调用forceUpdate()将导致在组件上调用render()，跳过shouldComponentUpdate()。更多…

设置状态()

setState()总是会触发重新呈现，除非在shouldComponentUpdate()中实现了条件呈现逻辑。更多…

forceUpdate()可以通过this.forceUpdate()从组件中调用

钩子:如何在React中使用钩子强制组件重新渲染?

顺便说一句:你是在改变状态还是你的嵌套属性不传播?

如何在React中更新嵌套的状态属性 沙盒

使用钩子或HOC选择

使用钩子或HOC(高阶组件)模式，可以在存储发生变化时进行自动更新。这是一种没有框架的轻量级方法。

useStore钩子处理存储更新的方式

interface ISimpleStore {
  on: (ev: string, fn: () => void) => void;
  off: (ev: string, fn: () => void) => void;
}

export default function useStore<T extends ISimpleStore>(store: T) {
  const [storeState, setStoreState] = useState({store});
  useEffect(() => {
    const onChange = () => {
      setStoreState({store});
    }
    store.on('change', onChange);
    return () => {
      store.off('change', onChange);
    }
  }, []);
  return storeState.store;
}

withStores HOC处理存储更新

export default function (...stores: SimpleStore[]) {
  return function (WrappedComponent: React.ComponentType<any>) {
    return class WithStore extends PureComponent<{}, {lastUpdated: number}> {
      constructor(props: React.ComponentProps<any>) {
        super(props);
        this.state = {
          lastUpdated: Date.now(),
        };
        this.stores = stores;
      }

      private stores?: SimpleStore[];

      private onChange = () => {
        this.setState({lastUpdated: Date.now()});
      };

      componentDidMount = () => {
        this.stores &&
          this.stores.forEach((store) => {
            // each store has a common change event to subscribe to
            store.on('change', this.onChange);
          });
      };

      componentWillUnmount = () => {
        this.stores &&
          this.stores.forEach((store) => {
            store.off('change', this.onChange);
          });
      };

      render() {
        return (
          <WrappedComponent
            lastUpdated={this.state.lastUpdated}
            {...this.props}
          />
        );
      }
    };
  };
}

SimpleStore类

import AsyncStorage from '@react-native-community/async-storage';
import ee, {Emitter} from 'event-emitter';

interface SimpleStoreArgs {
  key?: string;
  defaultState?: {[key: string]: any};
}

export default class SimpleStore {
  constructor({key, defaultState}: SimpleStoreArgs) {
    if (key) {
      this.key = key;
      // hydrate here if you want w/ localState or AsyncStorage
    }
    if (defaultState) {
      this._state = {...defaultState, loaded: false};
    } else {
      this._state = {loaded: true};
    }
  }
  protected key: string = '';
  protected _state: {[key: string]: any} = {};
  protected eventEmitter: Emitter = ee({});
  public setState(newState: {[key: string]: any}) {
    this._state = {...this._state, ...newState};
    this.eventEmitter.emit('change');
    if (this.key) {
      // store on client w/ localState or AsyncStorage
    }
  }
  public get state() {
    return this._state;
  }
  public on(ev: string, fn:() => void) {
    this.eventEmitter.on(ev, fn);
  }
  public off(ev: string, fn:() => void) {
    this.eventEmitter.off(ev, fn);
  }
  public get loaded(): boolean {
    return !!this._state.loaded;
  }
}

如何使用

对于钩子:

// use inside function like so
const someState = useStore(myStore);
someState.myProp = 'something';

在HOC情况下:

// inside your code get/set your store and stuff just updates
const val = myStore.myProp;
myOtherStore.myProp = 'something';

// return your wrapped component like so
export default withStores(myStore)(MyComponent);

确保 以单例方式导出你的商店，以获得全局变化的好处，如下所示:

class MyStore extends SimpleStore {
  public get someProp() {
    return this._state.someProp || '';
  }
  public set someProp(value: string) {
    this.setState({...this._state, someProp: value});
  }
}
// this is a singleton
const myStore = new MyStore();
export {myStore};

这个方法非常简单，对我来说很管用。我也在大型团队中工作，使用Redux和MobX，并发现它们也很好，但只是很多样板文件。我只是个人喜欢我自己的方法，因为我总是讨厌大量的代码，当你需要的时候，它可以是简单的。

只是另一个回复来支持接受的答案:-)

React不鼓励使用forceUpdate()，因为他们通常对函数式编程有一种非常“这是唯一的方法”的方法。这在很多情况下是没问题的，但许多React开发人员都有oo背景，使用这种方法，监听可观察对象是完全可以的。

如果你这样做，你可能知道你必须重新渲染时，可观察对象“火灾”，因此，你应该使用forceUpdate()，它实际上是一个加，shouldComponentUpdate()是不涉及在这里。

像MobX这样的工具，采用oo方法，实际上是在表面之下做这件事(实际上MobX直接调用render())

使用useEffect作为componentDidMount, componentDidUpdate和componentWillUnmount的组合，如React文档中所述。

要像componentDidMount一样工作，你需要像这样设置你的useEffect:

  useEffect(() => console.log('mounted'), []);

第一个参数是一个回调，它将根据第二个参数(一个值数组)触发。如果第二个参数中的任何值发生了变化，您在useEffect中定义的回调函数将被触发。

然而，在我所展示的示例中，我传递了一个空数组作为第二个参数，这将永远不会被更改，因此回调函数将在组件挂载时调用一次。

这是对useEffect的总结。如果不是空值，而是有一个参数，比如:

 useEffect(() => {

  }, [props.lang]);

这意味着每次道具。Lang改变，你的回调函数将被调用。useEffect实际上不会重新渲染你的组件，除非你在回调函数中管理一些状态，这些状态可能会触发重新渲染。

如果你想要触发一个重新渲染，你的渲染函数需要在你的useEffect中更新一个状态。

例如，在这里，渲染函数开始显示英语作为默认语言，在我的使用效果中，我在3秒后改变了语言，所以渲染被重新渲染并开始显示“西班牙语”。

function App() {
  const [lang, setLang] = useState("english");

  useEffect(() => {
    setTimeout(() => {
      setLang("spanish");
    }, 3000);
  }, []);

  return (
    <div className="App">
      <h1>Lang:</h1>
      <p>{lang}</p>
    </div>
  );
}

我发现最好避免使用forceUpdate()。强制重新呈现的一种方法是在临时外部变量上添加render()依赖项，并在需要时更改该变量的值。

下面是一个代码示例:

class Example extends Component{
   constructor(props){
      this.state = {temp:0};

      this.forceChange = this.forceChange.bind(this);
   }

   forceChange(){
      this.setState(prevState => ({
          temp: prevState.temp++
      })); 
   }

   render(){
      return(
         <div>{this.state.temp &&
             <div>
                  ... add code here ...
             </div>}
         </div>
      )
   }
}

当你需要强制重新渲染时，调用this.forceChange()。

为了完成你所描述的，请尝试this.forceUpdate()。