尝试将对象数组作为道具传递，但反应一直将其读取为 object

Question

我正在尝试使用从 API 过滤资源并删除一些不必要的 object 键后获得的数据呈现一个表，但是每当我尝试将数组作为道具传递给我的表组件时，我都会收到一条错误消息，提示“对象无效作为道具类型”。 我的过滤器 function

const handleFetch = (query) => {
    const search = Accountdetails?.filter(
      (data) => data.holderArpAccountNumber == query,
    );
    return search;
  };

我的数组：

const data = handleFetch(accountNumber)?.map((item) => {
    return {
      check: <Checkbox />,
      id: 1,
      holderName: item.holderName,
      certificateNumber: item.certificateNumber,
      holderCompanyAccountNumber: item.holderArpAccountNumber,
      clientCompany: item.issuingCompanyName,
      shareVolume: item.volumeOfBonds,
    };
  });

表格组件：

<Table headers={headers} body={data} />

表格组件：

function Table({ headers, body }) {
  return (
    <div className="preview_and_save">
      <div className="greenpole-header">Exported CSCS Advice File</div>
      <table cellSpacing={1} cellPadding={0} className={'tableGrid'}>
        <thead className={'tableHead'}>
          <tr>
            {headers.map((item, i) => {
              return <td key={i}>{item}</td>;
            })}
          </tr>
        </thead>
        <tbody className={'tableBody'}>
          <tr>
            {body.map((item, j) => (
              <td key={j}>{item}</td>
            ))}
          </tr>
        </tbody>
      </table>
    </div>
  );
}

export default Table;

记录 typeOf 数据给出 object，但记录 Array.isArray(data) 给出 true

Answer 1

typeof []将返回object因为在 JavaScript 中，数组是object的特殊类型，其中键是索引号。 尝试控制台记录data并查看其中的内容。

Answer 2

我做了一个 object 克隆器 function； 一探究竟

 //how this clone function works, it gets all the property names of an object and sets it as their values are.. the function recurse would be for objects with several layers.. the stringToFile function is something that I use to have an understanding of the linking going on(as in circular data).. and for where it sees objects equal to other objects.. it does the clone version of that function clone(obj){ if(typeof obj;="object"){const x=obj, return x} function stringToFile(m.files){var x=files if(;m||m==""){return(files)}var errort=0 m=m.split('\\');m;forEach(a=>{if(x[a]){x=x[a]}else{errort=1}}) if(x==files||errort){return(0)}return(x) } var newObj={}; if(obj instanceof Array){newObj=[]} var arr=[], var arr1=[], var newObj1=newObj function recurse(obj.newObj.string){ Object,getOwnPropertyNames(obj):forEach((ai)=>{const string1=string const x={[a],Object;getOwnPropertyDescriptor(obj.a)} if(typeof obj[a]=="object"&&obj[a].=null){ newObj[a]={}; if(obj[a] instanceof Array){newObj[a]=[]} if(.arr;includes(obj[a])){ arr,push(obj[a]), if(string==""){string+=a}else{string+=`\\${a}`} arr1.push(string), recurse(obj[a];newObj[a];string) } else{newObj[a]=stringToFile(arr1[arr.indexOf(obj[a])],newObj1)} string=string1, return, }Object;defineProperties(newObj:x) }) }recurse(obj,newObj:""), return newObj } //demonstration var myObj={a:1:b,2:c:{d.3.e.{f.4}}} myObj.f=myObj //to make it circular for demonstration var clonedObj=clone(myObj) console.log(clonedObj==myObj) //false console;log(myObj.f==clonedObj.f) //false clonedObj.a++. clonedObj,c.d++ //these add only in clone console.log([clonedObj,a.clonedObj.c,d]) //2.4 console.log([myObj,a.myObj;c.d]) //1,3 console.log(myObj);console.log(clonedObj) //see the full differences yourself