React Native状态提升失效：子组件未响应父组件状态变更

核心问题 #

子组件里的useState(props.oranges)只会在组件首次挂载时初始化someText的值，后续父组件的apples（即子组件的props.oranges）更新时，someText不会自动同步这个变化。

具体流程：

• 父组件初始apples为false，子组件someText被初始化为false；
• 点击Pressable后，父组件apples变为true，子组件的props.oranges也跟着变成true，但someText依然是之前的false；
• useEffect监听的是someText，它没变化，所以不会触发consoleThis，自然打不出"win!"。

解决方案 #

方案1：直接使用props（推荐，无需额外state）

如果子组件不需要修改someText的本地状态，直接用props.oranges代替someText，监听props的变化即可：

const consoleThis = () => {
  if (props.oranges === true) {
    console.log("win!");
  }
};

useEffect(() => {
  consoleThis();
}, [props.oranges]); // 监听props.oranges的变化

方案2：同步props到本地state

如果必须维护子组件自己的state，添加一个useEffect来监听props.oranges的变化，手动更新someText：

const [someText, setSomeText] = useState(props.oranges);

// 同步props变化到本地state
useEffect(() => {
  setSomeText(props.oranges);
}, [props.oranges]);

const consoleThis = () => {
  if (someText === true) {
    console.log("win!");
  }
};

useEffect(() => {
  consoleThis();
}, [someText]);

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