Question

谁能告诉我为什么，当我在componentWillMount（）方法中设置状态时，在设置状态之前运行render（）中的函数，即

这是我的应用程序：

class App extends Component {
  constructor(props){
    super(props);
    this.state={
      x : 50,
      y : 100,
      width : 200,
      height : 300
    }
    this.handleDuplicate = this.handleDuplicate.bind(this);
  }

  handleDuplicate(newDims){
    this.setState({newDims : newDims})
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <svg id="svgOne" width="5000" height="3000">
          <NewRect 
            {...this.state}
            handleDuplicate={this.handleDuplicate}
          />
        </svg>
      </div>
    );
  }
}

这是我的组件NewRect：

import React, { Component } from 'react';

class NewRect extends Component {
  componentWillMount(){
    let { x, y, width, height } = this.props
    let newDims = {
      x : x + 30,
      y : y + 30,
      width : width - 50,
      height : height + 50
    }
    this.props.handleDuplicate(newDims);
  }

  render() {
    console.log(this.props);
    return (
          <rect 
            x={this.props.x} 
            y={this.props.y} 
            width={this.props.width} 
            height={this.props.height} 
            fill="black" 
          />
    );
  }
}

export default NewRect;

据我所知，componentWillMount（）的全部要点是完成在render（）之前需要完成的所有操作。

Answer 1

setState是异步的，因此不能假定以新状态调用render。

您可以做的是创建一个名为“ loading”或类似名称的状态变量，将其初始值设置为true，然后在componentWillMount中将其设置为false。

在渲染中，当加载仍然为true时，您将显示一个微调器。

顺便说一句，我发现很难理解您的代码，但是我确信React比我聪明:) 您将父项的状态作为道具传递给子组件，子组件在父组件中运行一个函数，该函数可能会更改父项的状态，该函数作为道具传递...不是最简单的事情，我希望它能起作用：）< / p>

我会尝试考虑一种更简单的方法，但是我并不总是正确的，离它很远...

Answer 2

setState是异步的。我怀疑这是怎么回事：

App.render()被称为
NewRect实例化
NewRect.componentWillMount()被称为
App.handleDuplicate()被称为
App.setState()被称为
NewRect.render()被称为
App.setState()更改已执行
App.render()被称为
新道具传递到NewRect
NewRect.render()被称为

最终这无关紧要。如果是这样，请考虑在NewRect中镜像状态，或在setState上使用回调。如果您的模式依赖于同步渲染，则可能需要重新访问您的体系结构。 React正在移动toward fully asynchronous rendering。

如何在React中渲染之前设置道具

2 个答案: