在ReactJS中渲染时,TypedArray将其值显示为NaN

Question

我最近需要使用Float32Arraytyped-array,它将用于呈现元素列表(无论是什么类型的格式 - 例如<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#map()希望回调返回一个数字,并且该方法本身返回一个Float32Array.你想要做的是先将它转换为数组,然后映射它:

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