React+Redux下跨组件传递币种选择值的实现方案咨询

看起来你已经搭好了基础组件，但Redux状态管理的链路还没完全打通——当前你的mapDispatchToProps只是返回了固定值，并没有真正触发action去更新store，reducer也没处理对应的状态更新逻辑。下面我给你一步步拆解可行的实现方案：

1. 定义Redux Action（触发状态更新的动作） #

首先新建一个actions/cryptoActions.js文件，用来定义更新选中币种的动作类型和创建函数：

// 定义action类型常量
export const SET_SELECTED_CRYPTO = 'SET_SELECTED_CRYPTO';

// 创建action creator，用来传递选中的币种值
export const setSelectedCrypto = (crypto) => ({
  type: SET_SELECTED_CRYPTO,
  payload: crypto
});

2. 更新Redux Reducer（处理状态变更逻辑） #

在你的reducer中添加处理上述action的逻辑，假设你的根reducer文件是reducers/index.js：

import { SET_SELECTED_CRYPTO } from '../actions/cryptoActions';

// 初始状态：保留你原有的token，新增选中币种的默认值
const initialState = {
  token: '',
  selectedCrypto: ''
};

const cryptoReducer = (state = initialState, action) => {
  switch (action.type) {
    case SET_SELECTED_CRYPTO:
      return {
        ...state,
        selectedCrypto: action.payload
      };
    // 保留你原有的其他状态处理逻辑
    default:
      return state;
  }
};

export default cryptoReducer;

如果是用combineReducers合并多个reducer，确保这个crypto reducer已经被加入到根reducer中。

3. 修改SelecionarCrypto组件（正确触发action更新Store） #

现在调整你的选择组件，在选中币种时调用dispatch触发action，不再依赖组件自身state存储值：

import React, { Component } from 'react';
import { Select } from 'antd';
import { connect } from "react-redux";
// 导入我们定义的action
import { setSelectedCrypto } from './actions/cryptoActions';

class SelecionarCrypto extends Component {
  constructor(props) {
    super(props);
    this.onChange = this.onChange.bind(this);
    this.onBlur = this.onBlur.bind(this);
    this.onFocus = this.onFocus.bind(this);
    this.onSearch = this.onSearch.bind(this);
  };

  onChange(value) {
    console.log(`selected ${value}`);
    // 调用props中的方法，触发action更新store
    this.props.setSelectedCrypto(value);
  }

  onBlur() {
    console.log('blur');
  }

  onFocus() {
    console.log('focus');
  }

  onSearch(val) {
    console.log('search:', val);
  }

  render(){
    const { Option } = Select;
    // 从store中获取当前选中的币种，用于回显
    const { selectedCrypto } = this.props;
    return (
      <Select 
        showSearch 
        style={{ width: 200 }} 
        placeholder="Seleciona:" 
        optionFilterProp="children" 
        onChange={this.onChange} 
        onFocus={this.onFocus} 
        onBlur={this.onBlur} 
        onSearch={this.onSearch} 
        filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0 }
        value={selectedCrypto} // 保持组件选中状态与store同步
      >
        <Option value="ETH">ETH</Option>
        <Option value="BTC">BTC</Option>
        <Option value="XRP">XRP</Option>
      </Select>
    );
  }
}

const mapStateToProps = state => {
  return { 
    token: state.token, 
    selectedCrypto: state.selectedCrypto // 从store获取当前选中的币种
  };
};

// 将action creator映射到组件props中
const mapDispatchToProps = (dispatch) =>{
  return{ 
    setSelectedCrypto: (crypto) => dispatch(setSelectedCrypto(crypto))
  }
};

export default connect(mapStateToProps, mapDispatchToProps)(SelecionarCrypto);

4. 在PruebasAPI3组件中获取值并渲染表格 #

修改表格组件，从store中拿到选中的币种，根据它构建对应的数据：

import React, { Component } from 'react';
import { connect } from "react-redux";
import MDBDataTable from 'mdbreact';

class PruebasAPI3 extends Component {
  // 根据选中币种生成表格数据
  getTableData = () => {
    const { selectedCrypto } = this.props;
    // 这里可以替换为真实API请求，下面是模拟数据示例
    let tableData;
    switch(selectedCrypto) {
      case 'ETH':
        tableData = {
          columns: [
            { label: '交易ID', field: 'id' },
            { label: '金额', field: 'amount' }
          ],
          rows: [
            { id: 'ETH001', amount: '0.5' },
            { id: 'ETH002', amount: '1.2' }
          ]
        };
        break;
      case 'BTC':
        tableData = {
          columns: [
            { label: '交易ID', field: 'id' },
            { label: '金额', field: 'amount' }
          ],
          rows: [
            { id: 'BTC001', amount: '0.003' },
            { id: 'BTC002', amount: '0.01' }
          ]
        };
        break;
      case 'XRP':
        tableData = {
          columns: [
            { label: '交易ID', field: 'id' },
            { label: '金额', field: 'amount' }
          ],
          rows: [
            { id: 'XRP001', amount: '100' },
            { id: 'XRP002', amount: '250' }
          ]
        };
        break;
      default:
        // 默认空数据提示
        tableData = {
          columns: [],
          rows: [{ message: '请选择一个币种查看数据' }]
        };
    }
    return tableData;
  }

  render() {
    const tableData = this.getTableData();
    return (
      <MDBDataTable
        striped
        bordered
        hover
        data={tableData}
      />
    );
  }
}

const mapStateToProps = state => {
  return { 
    token: state.token, 
    selectedCrypto: state.selectedCrypto // 从store获取选中的币种
  };
};

export default connect(mapStateToProps)(PruebasAPI3);

额外优化建议 #

• 如果表格数据来自API，可以在componentDidUpdate中监听selectedCrypto的变化，自动触发请求：

componentDidUpdate(prevProps) {
  if (prevProps.selectedCrypto !== this.props.selectedCrypto) {
    // 调用API获取对应币种的数据
    this.fetchCryptoData(this.props.selectedCrypto);
  }
}

• 可以在reducer的初始状态中给selectedCrypto设置默认值（比如'ETH'），让页面加载时就有数据显示。
• 推荐使用Redux Toolkit简化开发，它可以自动生成action类型和creator，减少样板代码。

内容的提问来源于stack exchange，提问作者Kentron.dna