TypedArray在ReactJS渲染时显示其值的NaN

Question

最近，我需要使用Float32Array类型阵列，其将在用于呈现元素的列表（不管是什么类型的格式 - 例如用<ul>作为我的数组的每个元素的<li>）。出于某种原因，当我尝试呈现的价值观，我得到NaN即使isNaN()调用返回false而且每个元素的typeof是number和控制台打印就好值。例如：

class App extends Component {
  constructor(props) {
    super(props);

    this.state = { channels: new Float32Array([1, 2, 3, 4]) };
  }

  render() {
    return (
      <ul>
        {this.state.channels.map((val, index) => (
          <li key={index}>{val}</li>
        ))}
      </ul>
    );
  }
}

export default App;

这一个打印一系列NaNNaNNaNNaN的（即使不是在适当的<li>要素分配它们。我期望有印刷因为它们已经被存储在数组中的值。

没有任何理由为它呈现不会对类型的数组（如预期）工作，但在控制台记录工作得很好？ （还是我确实做错了什么？）

谢谢！

Answer 1

它这样做的原因是因为Float32Array＃地图（）预计回调返回一个数字，该方法本身返回Float32Array。什么你想要做的是首先转换成数组，然后映射它：

Array.from(this.state.channels).map((val, i) => ...)