React/Redux新手求助：如何跨文件传递组件状态？

嘿，作为React和Redux新手遇到跨组件传状态的问题太正常啦！我来帮你梳理下针对你场景的可行解决办法～

你的问题背景 #

你已经在Hue.js组件中通过API请求，把数据存入了组件自身状态的productJSON数组中，现在需要把这个数组传递到另一个文件ColorShop.js里使用。

方案一：利用Redux管理全局状态（最适合跨文件/组件场景） #

既然你已经在用Redux，那把productJSON放到全局store里是最合理的选择，这样任何组件都能方便获取到数据。具体步骤如下：

1. 创建Redux Action和Action Creator #

首先定义一个用来更新产品数据的action，创建一个actions.js文件：

// actions.js
export const SET_PRODUCTS = 'SET_PRODUCTS';

export const setProducts = (products) => ({
  type: SET_PRODUCTS,
  payload: products
});

2. 创建对应的Reducer来处理Action #

在reducers.js里添加处理这个action的逻辑，维护全局的产品数据：

// reducers.js
import { SET_PRODUCTS } from './actions';

const initialState = {
  products: []
};

export const productReducer = (state = initialState, action) => {
  switch(action.type) {
    case SET_PRODUCTS:
      return {
        ...state,
        products: action.payload
      };
    default:
      return state;
  }
};

// 别忘了把这个reducer合并到根reducer里（如果有多个reducer的话）
import { combineReducers } from 'redux';

const rootReducer = combineReducers({
  products: productReducer,
  // 其他reducer...
});

export default rootReducer;

3. 在Hue.js中把数据存入Redux Store #

修改Hue.js的API请求逻辑，当获取到数据后，通过dispatch把数据发送到Redux store里（这里假设你已经用connect或者Redux Hooks把组件和store关联了）：

// Hue.js
import React from 'react';
import { connect } from 'react-redux';
import { setProducts } from './actions';

class Hue extends React.Component {
  constructor() {
    super();
    // 现在不需要在组件自身state存productJSON了，直接用Redux全局状态
    this.state = {};
  }

  // 注意：React 17+已经不推荐用componentWillMount，建议换成componentDidMount
  componentDidMount() {
    fetch('你的API地址')
      .then(res => res.json())
      .then(data => {
        // 把获取到的数据dispatch到Redux store
        this.props.setProducts(data);
      })
      .catch(err => console.error('请求失败:', err));
  }

  render() {
    // 组件自身的渲染逻辑...
    return <div>...</div>;
  }
}

// 把action creator映射到组件的props上
export default connect(null, { setProducts })(Hue);

4. 在ColorShop.js中获取Redux Store里的数据 #

现在ColorShop.js可以通过Redux获取到全局的产品数据了，分两种情况：

如果是类组件：

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

class ColorShop extends React.Component {
  render() {
    // 从props里拿到products数据
    const { products } = this.props;
    return (
      <div>
        {products.map(product => (
          <div key={product.id}>{product.name}</div>
        ))}
      </div>
    );
  }
}

// 把Redux store里的products映射到组件props
const mapStateToProps = (state) => ({
  products: state.products.products
});

export default connect(mapStateToProps)(ColorShop);

如果是函数组件（推荐用Redux Hooks）：

// ColorShop.js
import React from 'react';
import { useSelector } from 'react-redux';

const ColorShop = () => {
  // 直接从store里获取products数据
  const products = useSelector(state => state.products.products);
  
  return (
    <div>
      {products.map(product => (
        <div key={product.id}>{product.name}</div>
      ))}
    </div>
  );
};

export default ColorShop;

方案二：组件层级传递（仅适用于组件有直接/间接父子关系的场景） #

如果Hue.js和ColorShop.js存在层级关系（比如Hue是ColorShop的父组件，或者是祖辈组件），也可以用React的props传递：

1. 父组件直接传props #

如果Hue是ColorShop的父组件，直接把数据作为props传递：

// Hue.js的render方法里
render() {
  return <ColorShop products={this.state.productJSON} />;
}

然后在ColorShop里接收props：

// ColorShop.js
class ColorShop extends React.Component {
  render() {
    const { products } = this.props;
    // 渲染逻辑...
  }
}

2. 深层级组件用Context API #

如果组件层级很深，用props逐层传递太麻烦，可以用React的Context API来传递数据，但既然你已经在用Redux，Redux其实已经封装了类似的逻辑，优先用Redux会更省心。

小提示 #

• 尽量避免使用componentWillMount，React官方已经标记这个生命周期函数为不安全，推荐用componentDidMount发起API请求，因为它只会在组件挂载后执行一次，更符合预期。
• 如果你的项目是用函数组件为主，建议多使用Redux Hooks（useSelector、useDispatch），写法更简洁，不需要用connect高阶组件。

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