问题根源拆解 #

兄弟，你踩的这个坑真的是React初学者绕不开的典型问题！核心是你对getDerivedStateFromProps的触发时机理解错了——它不只是父组件传入新props时才执行，只要组件要重新渲染（比如你修改内部状态触发render），这个生命周期方法就会被调用。

所以当你在输入框修改状态后，组件触发render，getDerivedStateFromProps又跑一遍：这时候nextProps.someProp还是原来的值，和你刚修改后的prevState.someStateVar不等，于是就把状态又重置回了props的初始值，自然输入就失效了。

靠谱解决方案 #

根据你的需求（用prop设初始值，仅新prop到来时更新状态，平时允许输入修改），给你三个实用方案，按需选择：

方案1：用key属性让组件重新挂载（最简单粗暴） #

如果你的组件不需要在prop变化时保留内部状态，直接给子组件加一个和someProp绑定的key：

// 父组件中调用你的子组件
<YourComponent someProp={parentValue} key={parentValue} />

原理是：当parentValue（传给子组件的prop）变化时，key跟着变，React会认为这是一个新组件，直接销毁旧组件重新挂载。新组件初始化时会用新prop作为状态初始值；平时输入修改状态时，因为key没变化，组件不会被重置，完全不受影响。

方案2：改进getDerivedStateFromProps的判断逻辑（Class组件专用） #

在组件的state里额外存一个“上一次接收的prop值”，比如prevSomeProp，然后在getDerivedStateFromProps里只比较新prop和上一次的prop，而不是和当前state比较：

class YourComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      someStateVar: props.someProp,
      prevSomeProp: props.someProp // 记录初始prop值
    };
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    // 只有当新prop和上一次记录的prop不一样时，才更新状态
    if (nextProps.someProp !== prevState.prevSomeProp) {
      return {
        someStateVar: nextProps.someProp,
        prevSomeProp: nextProps.someProp // 更新记录的prop值
      };
    }
    // 没有变化就返回null，不修改状态
    return null;
  }

  handleInputChange = (e) => {
    this.setState({ someStateVar: e.target.value });
  };

  render() {
    return (
      <input
        value={this.state.someStateVar}
        onChange={this.handleInputChange}
      />
    );
  }
}

这样一来，只有父组件真正传入新prop时，才会更新状态；你自己输入修改状态时，因为nextProps.someProp和prevState.prevSomeProp相等，getDerivedStateFromProps会返回null，不会干扰你的输入。

方案3：用useEffect监听prop变化（函数组件专用） #

如果你的组件是函数式的，直接用useState初始化状态，再用useEffect监听prop变化，只有当prop更新时才同步到状态：

import { useState, useEffect } from 'react';

function YourComponent({ someProp }) {
  // 用prop初始化状态
  const [someStateVar, setSomeStateVar] = useState(someProp);

  // 监听someProp的变化，只有它变了才更新状态
  useEffect(() => {
    setSomeStateVar(someProp);
  }, [someProp]); // 依赖数组里只放someProp，确保只有它变化时才执行

  const handleInputChange = (e) => {
    setSomeStateVar(e.target.value);
  };

  return (
    <input
      value={someStateVar}
      onChange={handleInputChange}
    />
  );
}

这个方案逻辑清晰，完全符合你的需求：初始值来自prop，prop更新时同步状态，平时输入自由修改状态。

内容的提问来源于stack exchange，提问作者GithubGopher