如何将useSelector结果作为props传递给组件？类组件接收赋值遇null问题

别着急，我来一步步帮你搞定这两个问题～

一、函数式父组件传递useSelector获取的变量给子组件 #

这个操作其实和普通的props传递逻辑完全一致，非常简单：

• 你只需要在函数式父组件中通过useSelector拿到变量后，直接把它作为属性传递给目标子组件即可。
• 示例代码参考：

// 函数式父组件
import { useSelector } from 'react-redux';
import TargetComponent from './TargetComponent';

function ParentComponent() {
  // 通过useSelector获取redux中的数据
  const variable = useSelector(example);

  // 直接把variable作为props传给子组件
  return (
    <div>
      <TargetComponent passedData={variable} />
    </div>
  );
}

export default ParentComponent;

子组件不管是函数式还是类组件，都可以像接收普通props一样获取这个值：函数式组件通过参数接收，类组件通过this.props.passedData获取。

二、类组件中同步props.data到state的问题 #

先帮你修正代码里的小错误，再解决data: null的核心问题：

1. 先修正语法错误 #

你constructor里的state写法有个小问题，对象属性之间应该用逗号而非分号：

constructor(props) {
  super(props)
  // 把分号改成逗号
  this.state = { data: '' };
}

2. 解决data: null的问题 #

你遇到的null大概率是因为props.data是异步加载的（比如redux中的数据还没请求完成，组件挂载时还没拿到有效值），导致componentDidMount执行时this.props.data还是初始的null。

这里给你两个可行的解决办法：

方法一：监听props变化同步state

同时使用componentDidMount和componentDidUpdate，确保props更新时state也跟着同步：

export default class Component extends React.Component {
  constructor(props) {
    super(props)
    // 初始化时直接用props的初始值兜底
    this.state = { data: this.props.data || '' };
  }

  componentDidMount(){
    // 组件刚挂载时同步一次
    this.setState({ data: this.props.data });
  }

  componentDidUpdate(prevProps){
    // 当props.data发生变化时，更新state
    if(prevProps.data !== this.props.data){
      this.setState({ data: this.props.data });
    }
  }
}

方法二：直接使用props（更推荐）

如果你的state只是用来同步props的值，完全可以不用额外存到state里，直接在render中使用this.props.data即可，这样能彻底避免状态不同步的问题：

export default class Component extends React.Component {
  render() {
    const { data } = this.props;
    // 可以加个加载提示处理空值情况
    return <div>{data ? data : '数据加载中...'}</div>;
  }
}

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