React-Redux加密货币应用动态输出数据异常问题求助

嘿，我来帮你搞定这个currency.price显示不对的问题！这种情况通常和数据结构、状态映射或者异步请求的参数有关，咱们一步步来排查：

1. 先确认API返回的价格字段是不是price #

很多加密货币API（比如CoinGecko、Binance）返回的价格字段并不是直接叫price，比如CoinGecko的单币种数据里价格是current_price，有些API会把价格放在data.price或者quote.USD.price这种嵌套结构里。

你可以先在fetchCurrency action里打个日志，看看API返回的原始数据结构：

// 在fetchCurrency action里添加日志
export const fetchCurrency = (currencyId) => async dispatch => {
  const res = await axios.get(`https://your-api-url/${currencyId}`);
  console.log('API返回数据:', res.data); // 看看价格字段到底叫什么
  dispatch({ type: 'FETCH_CURRENCY', payload: res.data });
};

如果发现字段名不是price，那就要在reducer里把它映射到price字段，或者直接在组件里用正确的字段名。

2. 检查Redux状态里的currency是不是选中的那一个 #

接下来看你的mapStateToProps，是不是正确筛选出了你选中的加密货币？比如如果是通过路由跳转过来的，应该用路由参数来匹配：

const mapStateToProps = (state, ownProps) => {
  // 假设你的路由参数是currencyId，状态里的currencies是数组
  const selectedCurrency = state.currencies.find(curr => curr.id === ownProps.match.params.currencyId);
  return {
    currency: selectedCurrency
  };
};

这里要注意：

• 确保路由参数的名称和你在路由配置里的一致（比如是id还是symbol）
• 确保状态里的currencies数组每个对象都有唯一的标识（比如id）用来匹配

3. 确认异步请求的参数传对了 #

组件挂载时调用fetchCurrency的时候，是不是传了正确的选中货币标识？比如在componentDidMount里：

componentDidMount() {
  // 比如从路由参数里拿id传给action
  const { currencyId } = this.props.match.params;
  this.props.fetchCurrency(currencyId);
}

如果这里传错了参数（比如传成了固定值或者错误的字段），那拿到的肯定不是对应货币的数据。

4. 检查组件渲染时的变量是否正确 #

最后看看你渲染价格的地方，是不是用了正确的currency对象？比如有没有不小心写成了数组里的第一个元素，或者全局的其他变量：

// 错误示例：用了数组第一个元素
<div>价格: {this.props.currencies[0].price}</div>

// 正确示例：用选中的currency对象
<div>价格: {this.props.currency?.price}</div>

这里加个可选链操作符?.还能避免数据没加载完时的报错。

如果以上步骤都排查完还是有问题，你可以补充一下这些信息，我再帮你进一步分析：

• fetchCurrency action的完整代码
• Redux reducer处理这个数据的逻辑
• API返回的JSON结构示例
• mapStateToProps的完整代码

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