Question

这是我的组件。它是第一次呈现。随后，即使调用render，它也不会更改DOM。

Render在正确的时间被调用，因为我有redux设置和我的mapStateToProps＆＃39;似乎工作正常，因为它检测到应用程序状态的变化，并调用render（）。

控制台日志会记录字符串已更改的事实。

您可能希望看到更多代码，但我希望我错过了一个有人可以指出的基本概念。我不知道如何将我的整个项目放在这里。谢谢。再次，渲染DOES被调用，所以它不应该更新DOM吗？

import React from 'react';
import { Component } from 'react';
import { connect } from 'react-redux';
import {bindActionCreators} from 'redux';

class TinyMCETestResultElement extends Component {
  render (){
    console.log ("this.props.form0DataToDisplay " + this.props.form0DataToDisplay)// logs a changed string, as expected
    return (
      <div>
        <div>results: {this.props.form0DataToDisplay}</div>
      </div>
    )
  }

}

function mapStateToProps(state){
  //whatever gets returned will show up as props inside of
  return{
     form0DataToDisplay: state.tinyMceTestData
   }
}

export default connect( mapStateToProps, null)(TinyMCETestResultElement )

Answer 1

渲染块中的

Math.random()是此类组件行为的原因。只有在状态或道具发生变化的情况下，React才会重新呈现组件。您的代码示例中没有更新的道具/状态，因此组件只呈现一个。

您可以在商店中为随机值创建变量，并使用Math.random()将其更新为reducer。然后在你的组件中使用它作为道具，所有这些都没关系。

Answer 2

这可能是因为Redux的连接组件正在为您实施shouldComponentUpdate，并且它看到您的道具不会发生变化。因此，它不会为您更新该组件。

你可以在这里阅读：

Redux文档：http://redux.js.org/docs/basics/UsageWithReact.html

＆＃34; ...我们建议使用React Redux库的connect（）函数生成容器组件，该函数提供许多有用的优化以防止不必要的重新渲染。（这样做的一个结果是您不必担心自己实施shouldComponentUpdate的React性能建议。）＆＃34;

Twitter：https://twitter.com/dan_abramov/status/719723707124604928

快速解决方法可能是实现shouldComponentUpdate以始终返回true，从而覆盖Redux的实现。或者更好的是，每当你得到一个新的随机数时你的道具就会改变。

Answer 3

我应该提到我使用一个小的mce组件作为状态变化的来源。如果有人遇到这个问题，那么加载该组件似乎存在问题，可以通过在初始加载后重新渲染来修复。我将此代码添加到微小的mce组件中以修复它。可能没有必要定时器。

  componentDidMount(){
    var that = this;
    setTimeout(function(){
      that.forceUpdate();
    }, 1)
  }

React组件不会重新渲染，但会调用render（）

3 个答案:

Redux文档：http://redux.js.org/docs/basics/UsageWithReact.html

Twitter：https://twitter.com/dan_abramov/status/719723707124604928