你可以有几种方法:

1. 使用forceUpdate()方法:

使用forceUpdate()方法时可能会出现一些故障。一个例子是它忽略shouldComponentUpdate()方法，并将重新呈现视图，而不管shouldComponentUpdate()是否返回false。因此，应该尽可能避免使用forceUpdate()。

2. 通过这个。状态转换为setState()方法

下面这行代码克服了前面例子中的问题:

this.setState(this.state);

实际上，所有这些都是用触发重新渲染的当前状态覆盖当前状态。这仍然不一定是最好的方法，但它确实克服了使用forceUpdate()方法时可能遇到的一些故障。

使用钩子或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，并发现它们也很好，但只是很多样板文件。我只是个人喜欢我自己的方法，因为我总是讨厌大量的代码，当你需要的时候，它可以是简单的。

应该避免使用forceUpdate，因为它偏离了React的思维模式。React文档引用了一个何时使用forceUpdate的例子:

默认情况下，当组件的状态或道具改变时，组件将重新呈现。然而，如果这些隐式变化(例如:对象内部的深层数据变化而不改变对象本身)，或者如果你的render()方法依赖于一些其他数据，你可以通过调用forceUpdate()告诉React它需要重新运行render()。

然而，我想提出这样的观点:即使对于嵌套很深的对象，forceUpdate也是不必要的。通过使用不可变数据源跟踪更改变得便宜;更改总是会产生一个新对象，因此我们只需要检查对对象的引用是否已更改。你可以使用Immutable JS库将不可变数据对象实现到你的应用程序中。

通常情况下，你应该尽量避免使用forceUpdate()，只从这个中读取。道具和这个。render()中的状态。这使得你的组件“纯粹”，你的应用程序更简单、更高效。

改变你想要重新渲染的元素的键也可以。通过state在元素上设置键道具，然后当你想更新Set state时有一个新的键。

<Element key={this.state.key} /> 

然后发生了变化，您重置了密钥

this.setState({ key: Math.random() });

我要注意的是，这将取代键改变的元素。这可能有用的一个例子是，当您有一个文件输入字段，您希望在图像上传后重置。

虽然OP问题的真正答案是forceUpdate()，但我发现这个解决方案在不同的情况下都很有用。我还想指出的是，如果你发现自己使用了forceUpdate，你可能需要检查你的代码，看看是否有另一种方法来做事情。

注意1-9-2019:

以上(改变键)将完全替换元素。如果您发现自己正在更新键来进行更改，那么您的代码中的其他地方可能存在问题。在key中使用Math.random()将在每次渲染时重新创建元素。我不建议像这样更新键，因为react使用键来确定重新渲染事物的最佳方式。

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

forceUpdate()，但每次我听到有人谈论它，它的后续是你不应该使用这个。

为了完整性，你也可以在功能组件中实现:

const [, updateState] = useState();
const forceUpdate = useCallback(() => updateState({}), []);
// ...
forceUpdate();

或者，作为一个可重复使用的钩子:

const useForceUpdate = () => {
  const [, updateState] = useState();
  return useCallback(() => updateState({}), []);
}
// const forceUpdate = useForceUpdate();

参见:https://stackoverflow.com/a/53215514/2692307

请注意，使用强制更新机制仍然是不好的做法，因为它违背了反应的心态，所以如果可能的话仍然应该避免。