React中使用getDerivedStateFromProps后render值未更新求助

数据老陈

2026-8-23

问题解决：React类组件中getDerivedStateFromProps未更新render状态

你的代码核心问题是getDerivedStateFromProps方法没有声明为静态方法，React不会调用非静态的该生命周期方法，因此state不会被更新。

修复后的代码

class Strick_ extends React.Component {
  constructor(props) { // 传入props并传给super，避免潜在的props获取问题
    super(props);
    this.state = {
      Name: "",
      Room: "",
      Fair: 0
    };
  }

  // 必须添加static关键字，React才会识别这个生命周期方法
  static getDerivedStateFromProps(props, state) {
    return {
      Name: props.Names
    };
  }

  render() {
    return (
      <>
        <h3>PG Details </h3>
        <p>Room Person:{this.state.Name}</p>
        <p>Room number:{this.state.Room}</p>
        <p>Room fair:{this.state.Fair}</p> {/* 修正拼写错误faie→fair */}
      </>
    );
  }
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Strick_ Names="Ankit Chauhan"/>);

额外注意事项

getDerivedStateFromProps是React类组件的静态生命周期方法，必须用static修饰，它接收最新的props和当前state作为参数，返回的对象会合并到组件state中。
若你使用React 16.8+版本，更推荐用函数组件结合useState和useEffect实现相同逻辑，代码更简洁易维护：

function Strick_(props) {
  const [state, setState] = React.useState({
    Name: props.Names,
    Room: "",
    Fair: 0
  });

  // 当props.Names变化时更新state.Name
  React.useEffect(() => {
    setState(prev => ({ ...prev, Name: props.Names }));
  }, [props.Names]);

  return (
    <>
      <h3>PG Details </h3>
      <p>Room Person:{state.Name}</p>
      <p>Room number:{state.Room}</p>
      <p>Room fair:{state.Fair}</p>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Strick_ Names="Ankit Chauhan"/>);