Reactjs 在组件安装后设置状态？

故事：

我有一个服务器渲染，但我的应用程序的某些部分无法在那里完成，因为它们使用文档（用于在画布上绘制的react艺术库）。 我无法从中以相同的方式呈现所有内容，因为react会说从服务器接收到的代码与从客户端接收到的代码不同

因此，我的解决方案是在服务器上渲染应用程序的某个部分，然后在客户端上渲染该部分，在下一帧中，渲染客户端上无法渲染的所有内容

所以我考虑在

componentDidMount

中使用

setState

并触发DOM更新，这样它可以包含无法在服务器上呈现的呈现客户端部分，但eslint说在

componentDidMount

中设置状态是不好的。从逻辑上讲，我不能说为什么在这种情况下它是坏的。一般来说，这并不好，因为它会触发DOM更新，但在我的例子中，这正是我真正需要的

在这种情况下，你有什么建议

编辑1: 修正了打字错误，我的意思是

componentDidMount

不是

componentdiddupdate

编辑2:

---

是相同的问题，但他们使用在

componentDidMount

中更改状态作为解决方法。

尝试在

componentWillMount

或

componentWillUpdate中设置状态

注意
组件willmount
，它也可以称为服务器端。
我从您的问题中了解到，在安装组件后，服务器和客户端上的数据会发生更改，并且您希望使组件与更改的数据保持同步。
我建议您看看react的flux或redux架构。例如，flux的实现方式是，当组件中的任何内容发生更改时，它会触发操作并侦听存储。当存储中的任何内容发生更改时，组件将重新呈现自身

我想知道如何在安装我的应用程序后触发组件更新

在React中，将状态“推”到组件上的传统方法是使用
道具，而不是
状态
。如果应用程序需要从客户端获取信息并相应地调整组件
状态
，则应实现
组件将接收道具

如果您觉得服务器上呈现的状态和浏览器中呈现的状态是相同的，并且不想麻烦地跟踪哪些属性属于
this.state
v
this.props
，我建议如下：

componentWillReceiveProps(nextProps) {
  this.setState( Object.assign({}, this.state, nextProps) );
}

这将把传递的属性合并到组件状态中，以便可以使用
This.state
访问它们。请参阅关于
ReactJS-组件生命周期的链接。
您应该使用from
组件willmount
循环
componentWillMount
在呈现之前在服务器端和客户端执行。
我刚刚编写了一个类似的场景，并愉快地使用componentDidMount禁用ESLint的警告。IMHO它仅在通用渲染场景中完全有效

原因：在componentDidMount中使用setState，因为这样会触发额外的、不必要的渲染

但是，在一个通用场景中，如果您希望不同的服务器和客户机行为，您将需要额外的呈现，并且为了防止“无法重用标记”错误，您将在react与服务器呈现的DOM协调后使用它。简而言之：在任何情况下都将渲染两次

但是，我不建议在叶/哑组件中编码这种行为，因为这样做需要假定哑组件对其环境（客户机/服务器）有一些了解，并提出设计问题。创建一个可以设置哑组件的道具的组件是显而易见的解决方案。
防止在
componentDidMount
中使用
setState

组件装载后更新状态将触发第二次
render（）
调用，并可能导致属性/布局抖动。
以下模式被视为警告：

class MyComponent extends React.Component {
    componentDidMount(){
        this.setState({
            data: data
        });
    }
}

class MyComponent extends React.Component {
    constructor(){
         this.setState({
            data: data
        });
    }

    componentDidMount(){
       ...
    }
}

以下模式不被视为警告：

class MyComponent extends React.Component {
    componentDidMount(){
        this.setState({
            data: data
        });
    }
}

class MyComponent extends React.Component {
    constructor(){
         this.setState({
            data: data
        });
    }

    componentDidMount(){
       ...
    }
}

查看一下
getInitialState
，
getInitialState
用于设置初始值，但我对此没有问题。我的问题是：“在安装组件后如何更改状态？”我无法在
componentWillMount
中设置状态，因为它将呈现与我从服务器获取的数据不同的数据。我无法在
componentWillUpdate
中执行此操作，在第一次呈现时不会调用它，在这种情况下根本不会调用它。我的问题不是“在何处设置状态”，而是“在安装组件后如何更改状态？”或上述问题的任何其他替代方案。我已经使用了redux，但这是一个不同的问题。我的数据没有变化，我会在服务器上渲染所有内容。如果我不使用服务器上无法使用的库，我不会感到痛苦（在我的情况下是react art）。同样，我想知道如何在安装我的应用程序后触发组件更新。这是我所需要的事件，但我认为airbnb eslint中不允许在componentDidMount中设置状态。我不能这样做，因为我无法在服务器上渲染我的部分应用程序，
react-art
具有中断服务器渲染的窗口依赖性。它可以用于第一次渲染，但不能，因为在渲染页面时，它的html与从服务器发送的html不同。所以我有一个警告。这就是为什么我想要这种回调，在下一帧中呈现客户端部分。我的问题不是改变状态，我的状态一切都很好，它不应该改变。问题是我的客户机代码与服务器代码不同。从服务器发送html后，我有一个空容器，在客户端我有一个数据。我无法在服务器上呈现这些内容。所以我有一个警告：“React试图在容器中重用标记，但校验和无效。”。所以我想从服务器a呈现html