Javascript React setState方法未更新状态

我对反应相当陌生，在学习了状态和道具的基本概念（类似于我熟悉的Vue）之后，我尝试了这个小功能

expand = () => {
    this.setState((state, props) => ({
        height: state.height*2
    }), () => {
        console.log(this.state.height);
    });
}

该函数是从呈现的HTML中的onClick方法调用的

我遇到的问题是，当我运行代码时，

console.log（）

打印原始高度，而实际页面上没有任何变化

以下是代码的其余部分：

import React, { Component } from 'react';
import './draw.css';

class Task extends Component {

constructor(props) {
    super(props);

    this.state = {
        x: 10,
        y: 10,
        width: 200,
        height: 35
    };
}

render() {
    return (
        <foreignObject x={this.state.x} y={this.state.y}
            width={this.state.width} height={this.state.height}>
            <div className="task" style={{width: (this.state.width-22)+"px", 
            height: (this.state.height-22)+"px"}}
            onClick={this.expand}>
                Hello {this.props.name}
            </div>
        </foreignObject>
    );
}

expand = () => {
    this.setState((state, props) => ({
        height: state.height*2
    }), () => {
        console.log(this.state.height);
    });
}

static getDerivedStateFromProps(props, state) {
    return {
        x: props.x,
        y: props.y,
        width: props.width,
        height: props.height
    }
}
}
export default Task;

import React，{Component}来自'React'；
导入“/draw.css”；
类任务扩展组件{
建造师（道具）{
超级（道具）；
此.state={
x:10，
y:10，
宽度：200，
身高：35
};
}
render（）{
返回(
你好{this.props.name}
);
}
展开=（）=>{
this.setState（（状态，道具）=>({
高度：州。高度*2
}), () => {
console.log（this.state.height）；
});
}
静态getDerivedStateFromProps（props，状态）{
返回{
x:props.x，
y:道具，y，
宽度：props.width，
高度：道具高度
}
}
}
导出默认任务；

道具提供的输入与初始状态相同

---

控制台的输出：

35

您正在使用的

getDerivedStateFromProps

的问题。如果您浏览react文档，它会说：

在调用渲染方法之前，无论是在初始装载还是后续更新中，都会在右侧调用getDerivedStateFromProps。它应该返回一个对象来更新状态，或者返回null来不更新任何内容

因此，无论您更新任何设置状态，都会发生什么情况？您正在更新状态值，正如您从道具中所期望的那样。所以每次它都会从道具而不是你的状态中得到价值。为此，您不需要getDerivedStateFromProps。您可以这样做：

import React from "react";
import "./styles.css";

class Task extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      x: 10,
      y: 10,
      width: 200,
      height: 35
    };
  }

  expand = () => {
    this.setState(
      {
        height: this.state.height * 2
      },
      () => {
        console.log(this.state.height);
      }
    );
  };

  render() {
    return (
      <div
        x={this.state.x}
        y={this.state.y}
        width={this.state.width}
        height={this.state.height}
      >
        <div
          className="task"
          style={{
            width: this.state.width - 22 + "px",
            height: this.state.height - 22 + "px"
          }}
          onClick={this.expand}
        >
          Hello {this.props.name}
        </div>
      </div>
    );
  }

  // static getDerivedStateFromProps(props, state) {
  //   return {
  //     x: props.x,
  //     y: props.y,
  //     width: props.width,
  //     height: props.height
  //   };
  // }
}

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Task x={10} y={10} width={200} height={35} />
    </div>
  );
}

从“React”导入React；
导入“/styles.css”；
类任务扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
x:10，
y:10，
宽度：200，
身高：35
};
}
展开=（）=>{
这是我的国家(
{
高度：this.state.height*2
},
() => {
console.log（this.state.height）；
}
);
};
render（）{
返回(
你好{this.props.name}
);
}
//静态getDerivedStateFromProps（props，状态）{
//返回{
//x:props.x，
//y:道具，y，
//宽度：props.width，
//高度：道具高度
//   };
// }
}
导出默认函数App（）{
返回(
你好，代码沙盒
开始编辑，看看神奇的发生！
);
}

以下是演示：

---

如果要在道具值更改时更新状态值，可以使用componentDidUpdate。这是处理更新的道具和状态的更好方法

您正在使用的问题

getDerivedStateFromProps

。如果您浏览react文档，它会说：

在调用渲染方法之前，无论是在初始装载还是后续更新中，都会在右侧调用getDerivedStateFromProps。它应该返回一个对象来更新状态，或者返回null来不更新任何内容

因此，无论您更新任何设置状态，都会发生什么情况？您正在更新状态值，正如您从道具中所期望的那样。所以每次它都会从道具而不是你的状态中得到价值。为此，您不需要getDerivedStateFromProps。您可以这样做：

import React from "react";
import "./styles.css";

class Task extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      x: 10,
      y: 10,
      width: 200,
      height: 35
    };
  }

  expand = () => {
    this.setState(
      {
        height: this.state.height * 2
      },
      () => {
        console.log(this.state.height);
      }
    );
  };

  render() {
    return (
      <div
        x={this.state.x}
        y={this.state.y}
        width={this.state.width}
        height={this.state.height}
      >
        <div
          className="task"
          style={{
            width: this.state.width - 22 + "px",
            height: this.state.height - 22 + "px"
          }}
          onClick={this.expand}
        >
          Hello {this.props.name}
        </div>
      </div>
    );
  }

  // static getDerivedStateFromProps(props, state) {
  //   return {
  //     x: props.x,
  //     y: props.y,
  //     width: props.width,
  //     height: props.height
  //   };
  // }
}

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Task x={10} y={10} width={200} height={35} />
    </div>
  );
}

从“React”导入React；
导入“/styles.css”；
类任务扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
x:10，
y:10，
宽度：200，
身高：35
};
}
展开=（）=>{
这是我的国家(
{
高度：this.state.height*2
},
() => {
console.log（this.state.height）；
}
);
};
render（）{
返回(
你好{this.props.name}
);
}
//静态getDerivedStateFromProps（props，状态）{
//返回{
//x:props.x，
//y:道具，y，
//宽度：props.width，
//高度：道具高度
//   };
// }
}
导出默认函数App（）{
返回(
你好，代码沙盒
开始编辑，看看神奇的发生！
);
}

以下是演示：

---

如果要在道具值更改时更新状态值，可以使用componentDidUpdate。这是处理更新的道具和状态的更好方法

是否有任何理由使用getDerivedStateFromProps？ 如果没有它，代码应该可以工作

这来自react文档：

getDerivedStateFromProps

在调用渲染之前被调用 方法，无论是在初始装载时还是在后续更新时。它应该 返回对象以更新状态，或返回null以不更新任何内容

此方法适用于状态依赖于的罕见用例 道具随时间的变化。例如，它可能很方便 实现一个组件，该组件比较其以前的和 下一步，让孩子们决定让他们中的哪一个进入和退出动画

---

使用getDerivedStateFromProps有什么理由吗？ 如果没有它，代码应该可以工作

这来自react文档：

getDerivedStateFromProps

在调用渲染之前被调用 方法，无论是在初始装载时还是在后续更新时。它应该 返回对象以更新状态，或返回null以不更新任何内容

此方法适用于状态依赖于的罕见用例 道具随时间的变化。例如，它可能很方便 实现一个组件，该组件比较其以前的和 下一步，让孩子们决定让他们中的哪一个进入和退出动画

---

@Abhilash OP正在使用回调函数