react table v6，对象作为 React 子节点无效

问题描述

我收到了来自 API 的响应，https://codebeautify.org/jsonviewer/cbbfa709

为什么在 react table v6 中会出现这样的错误“错误：对象作为 React 子对象无效（找到：对象的键为 {branchStock,product,lastOrder,productFocusId,qtySuggestion,orderQuantity}）。如果您打算呈现“ ?

的集合

即使访问器名称与对象属性一致，如何解决这个问题？

"react-table-v6": "^6.8.6"

这是我的状态

const [state,setState] = useState({
    isLoading: true,tab: 'tab-1',productFocus: []
  })

设置状态的成功函数

 success => {
        const { data: { items } } = success.data
        setState(prevstate => {
          return {
            ...prevstate,productFocus: items.map((list) => {
              return Object.assign({},{
                branchStock: list.branchStock,product: list.product,lastOrder: list.lastOrder,productFocusId: list.productFocusId,qtySuggestion: list.qtySuggestion,orderQuantity: 0
              })
            }),isLoading: false
          }
        })
      },

这是我的表格组件

 {state.tab === "tab-1" ?
    <>
      <div className="my-5">
           {state.isLoading ? (<p>loading ...</p>) : (
            <Table
               data={state.productFocus}
               type='productFocus'
               dataListLength={10}
               showPagination={false}
            />
         )}
     </>
   }

这是我的手机

productFocus: [
      {
        Header: 'JKN',accessor: '',sortable: false,headerStyle,className: 'column-odd',},{
        Header: 'Product Name',accessor: 'product.productName',Cell: ({ row,original }) => {
          console.log('ori',original)
          return <p>tes</p>
        }
      },{
        Header: 'Price',accessor: 'product.hnaPrice',{
        Header: 'Promo',{
        Header: 'Branch Stock',accessor: 'branchStock',{
        Header: 'Quantity Suggestion',accessor: 'qtySuggestion',{
        Header: 'Order Quantity',{
        Header: 'SubTotal',]

在其他页面上，根据 API 的响应，表格可以很好地处理不同的数据

<Table
   data={state.lastSummaryByOutlet.collection}
   type='infoPaidCollection'
   dataListLength={10}
   showPagination={false}
/>

infoPaidCollection: [
      {
        Header: 'No Invoice',accessor: 'invoiceNo',className: 'column-event'
      },{
        Header: 'Amount',accessor: 'amount',Cell: ({ original }) => `Rp ${toCurrency(original.amount)}`
      }
  ],

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascript react-table-v6 reactjs reactjs