React中嵌套数组映射为列表的实现方法 提取子元素独立渲染

代码出现无分隔拼接长文本的问题来自两处逻辑错误：

• state赋值时多余的数组包裹：接口返回的depth对象本身结构为 { buy: [[价格, 数量], ...], sell: [...] }，你把它额外包成了长度为1的数组塞给dataDepth，导致外层map循环仅执行1次，根本遍历不到每一条交易数据
• 渲染逻辑错位：仅有的1次map回调里，你又把item.buy（本身就是完整的二维交易数组）手动包裹成新数组，直接把整个嵌套数组作为<li>的内容渲染。React遇到嵌套数组的渲染内容时，会自动把所有数组元素打平为连续文本节点，自然就出现了无分隔的数字拼接效果

1. 修正state赋值逻辑：去掉多余的数组包裹，直接将接口返回的depth对象存入state
2. 调整map遍历目标：直接对buy字段下的二维交易数组做遍历，为每个子交易条目单独生成独立<li>
3. 明确取值规则：每个交易子数组索引为0的元素就是交易价格，直接取这个值作为列表内容

import React, { Component } from "react";
import axios from "axios";

class BuySell extends Component {
  constructor() {
    super();
    this.state = {
      // 初始值设为null，等接口返回后再赋值实际数据
      dataDepth: null,
    };
  }

  componentDidMount() {
    axios.get("https://indodax.com/api/depth/btcidr").then((getData) => {
      // 去掉多余的数组包裹，直接存接口返回的原始对象
      this.setState({
        dataDepth: getData.data,
      });
    });
  }
  render() {
    // 空状态兜底，避免接口未返回时取buy字段报错
    if (!this.state.dataDepth?.buy) return <div>加载交易数据中...</div>

    // 直接遍历buy的二维数组，每个条目生成独立li
    const dataBuy = this.state.dataDepth.buy.map((tradeItem, index) => {
      // tradeItem是每个二维子数组，取索引0的价格值展示
      return <li key={index}>{tradeItem[0]}</li>;
    });

    return (
      <div>
        <h1>GET DATA:</h1>
        <ul>{dataBuy}</ul>
      </div>
    );
  }
}

export default BuySell;

调整后会按照预期把每一个交易条目的价格值单独渲染为独立列表项，不会出现无分隔拼接的长文本。因为交易列表是按价格排序的静态结构，用数组索引作为key完全满足React的渲染要求。

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