React函数传参设置状态问题：子组件传数组无法更新父组件状态

兄弟，这问题我太熟了！你遇到的其实是React状态更新的异步特性在搞鬼～

问题原因 #

React的setState（类组件）或者useState的更新函数（函数式组件）都是异步执行的。你在调用更新状态的方法后立刻console.log状态，此时React还没完成状态的更新操作，所以打印出来的还是旧的状态值。

解决方案 #

1. 类组件：使用setState的回调函数

setState支持第二个参数，这是一个状态更新完成后才会执行的回调函数，在这里你就能拿到最新的状态了。调整你的increaseReads方法如下：

increaseReads = (titles) => {
  console.log(titles); // 这里能正常拿到子组件传过来的数组
  this.setState(
    {
      articlesRead: [...this.state.articlesRead, ...titles]
    },
    // 状态更新完成后的回调
    () => {
      console.log(this.state.articlesRead); // 这里就能打印更新后的数组啦！
    }
  );
}

2. 额外检查：确保子组件传值正确

顺便确认一下子组件传递titles的方式是否正确，比如子组件里应该通过props调用父组件传过来的回调：

// 子组件示例代码
class ChildComponent extends React.Component {
  someMethod = () => {
    const titles = ["文章1", "文章2"];
    // 调用父组件传递的回调函数，把titles传过去
    this.props.onPassTitles(titles);
  }
}

父组件在引用子组件时要传入对应的回调：

// 父组件引用子组件
<ChildComponent onPassTitles={this.increaseReads} />

3. 如果是函数式组件：用useEffect监听状态变化

如果你的父组件是函数式组件，除了使用useState的函数式更新（避免依赖旧状态），还可以通过useEffect监听状态变化来打印最新值：

import { useState, useEffect } from 'react';

function ParentComponent() {
  const [articlesRead, setArticlesRead] = useState([]);

  const increaseReads = (titles) => {
    console.log(titles);
    // 函数式更新，确保基于最新的前序状态更新
    setArticlesRead(prevArticles => [...prevArticles, ...titles]);
  };

  // 监听articlesRead变化，状态更新后触发
  useEffect(() => {
    console.log(articlesRead);
  }, [articlesRead]);

  return <ChildComponent onPassTitles={increaseReads} />;
}

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