我有一个外部(组件),可观察对象,我想监听的变化。当对象更新时,它会发出更改事件,然后我希望在检测到任何更改时重新呈现组件。

使用顶级React。渲染这是可能的,但在组件中它不起作用(这是有意义的,因为渲染方法只返回一个对象)。

下面是一个代码示例:

export default class MyComponent extends React.Component {

  handleButtonClick() {
    this.render();
  }

  render() {
    return (
      <div>
        {Math.random()}
        <button onClick={this.handleButtonClick.bind(this)}>
          Click me
        </button>
      </div>
    )
  }
}

在内部单击按钮会调用this.render(),但这并不是真正导致呈现发生的原因(您可以在操作中看到这一点,因为由{Math.random()}创建的文本没有改变)。但是,如果我简单地调用this.setState()而不是this.render(),它就可以正常工作。

所以我想我的问题是:React组件需要有状态才能渲染吗?是否有一种方法可以在不改变状态的情况下强制组件按需更新?


当前回答

另一种方法是调用setState和preserve state:

this.setState(prevState=>({...上一页状态}));

其他回答

你可以使用forceUpdate()来了解更多细节。

有几种方法来渲染你的组件:

最简单的解决方案是使用forceUpdate()方法:

this.forceUpdate()

另一个解决方案是在状态下创建未使用的键(nonUsedKey) 然后调用setState函数更新这个nonUsedKey:

this.setState({ nonUsedKey: Date.now() } );

或者重写所有当前状态:

this.setState(this.state);

道具改变也提供了组件渲染。

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

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

强制更新()

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

设置状态()

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

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

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

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

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

当你想要两个React组件进行通信时,它们不受关系(父子关系)的约束,建议使用Flux或类似的架构。

您要做的是监听可观察组件存储的变化,该存储保存模型及其接口,并将导致呈现变化的数据保存为MyComponent中的状态。当存储推送新数据时,更改组件的状态,这会自动触发呈现。

通常你应该尽量避免使用forceUpdate()。从文档中可以看到:

通常情况下,你应该尽量避免使用forceUpdate(),只从这个中读取。道具和这个。render()中的状态。这使您的应用程序更加简单和高效