Question

在我的应用程序中，我从文件中获取了一个带有数据的Buffer对象。对于该缓冲区中的每个字节，我想渲染Bar并将该字节作为prop传递。但是，由于Bar根本无法渲染，因此map函数似乎对Buffer对象有问题。当我将数据更改为普通数组时，一切正常。

我在做什么错了？

import React from 'react';

function Bar(props) {
    return (
        <>
            {console.log(props.data)}
        </>
    )
}

function foo() {
  // var data = [0,1,2,3,4,5]
  var data = new Buffer([0,1,2,3,4,5])
  
  return(
    <div>
       {data.map((a) => {
          console.log(a) //correct data here
          return <Bar data={a} />;
       })}
    </div>
  )
}
```

Answer 1

Buffer类是否具有方法map()？ JavaScript数组是Array类的对象，该类具有Array.prototype.map方法。 Buffer类可能缺少这种方法。您可以手动遍历Buffer，也可以为Buffer类实现类似的方法。

Answer 2

new Buffer不返回Array。它返回一个Uint8Array。即使Uint8Array的原型中实际上有一个.map函数，React也不会正确地渲染它。

只需将其转换为Array。

const data = [...new Buffer([0,1,2,3,4,5])];

或

const data = Array.from(new Buffer([0,1,2,3,4,5]));

注意：在Uint8Array上映射仍然返回Uint8Array，这就是为什么没有渲染任何内容的原因。 React渲染不不接受Uint8Array。

Answer 3

您的代码无法正常运行的原因是，由于缓冲区（Uint8Array）上的地图回调方法应该返回另一个Uint8，但由于您没有返回Uint8值，假定默认值为0。

我不会详细解释，但是您可以按照以下代码片段来了解Uint8Array上map函数的内部工作。

const uint8 = new Uint8Array([25, 36, 49]);
const mappedArray = uint8.map(i => 'a');

console.log(mappedArray);

您可以通过预先遍历缓冲区并准备要渲染的react元素数组来解决此问题，如下所示：

function Bar(props) {
  return (
    <span>
      {props.value}
    </span>
  )
}

function Foo(props) {
  const data = new Buffer([0, 1, 2, 3, 4, 5]);
  const items = [];

  for (const [index, value] of data.entries()) {
    items.push(<Bar key={index} value={value} />);
  }
  return (
    <div>
      {items}
    </div>
  );
}

通过.map（）迭代Buffer对象，并通过prop将数据传递到组件

3 个答案: