React中如何将Redux存储的数据处理后传入组件props

核心逻辑：在从Redux读取状态的阶段直接做数据过滤，只返回第一条exchange数据，再通过props传给子组件即可，同时要做空值容错避免报错。

场景1：函数组件（搭配useSelector Hook，React Redux v7.1+ 支持） #

import { useSelector } from 'react-redux';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  // 从Redux读取数据时直接过滤出第一条exchange
  const firstExchange = useSelector(state => {
    // 替换成你自己Redux store中exchange数组对应的实际存储路径
    const exchangeList = state?.businessModule?.exchangeList || [];
    return exchangeList[0] ?? null;
  });

  return (
    <div>
      {/* 直接将处理好的数据传入子组件props */}
      <ChildComponent exchangeInfo={firstExchange} />
    </div>
  );
};

export default ParentComponent;

场景2：类组件（搭配connect高阶函数） #

import React from 'react';
import { connect } from 'react-redux';
import ChildComponent from './ChildComponent';

class ParentComponent extends React.Component {
  render() {
    const { firstExchange } = this.props;
    return (
      <div>
        <ChildComponent exchangeInfo={firstExchange} />
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  // 替换成你自己Redux store中exchange数组对应的实际存储路径
  const exchangeList = state?.businessModule?.exchangeList || [];
  return {
    firstExchange: exchangeList[0] ?? null
  };
};

export default connect(mapStateToProps)(ParentComponent);

注意事项 #

• 代码中的?.可选链和默认空数组是容错处理，避免Redux未初始化完成时报空指针错误
• 如果需要进一步裁剪第一条exchange的字段，直接在返回值处处理即可，例如只需要id和name字段可以写成：

  return exchangeList[0] ? {id: exchangeList[0].id, name: exchangeList[0].name} : null
  

• 子组件拿到props后可以先判断数据是否存在再渲染对应内容，避免出现空值渲染异常

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