1

我有这样的 API 响应，https://codebeautify.org/jsonviewer/cbbfa709

为什么在反应表 v6 中存在这样的错误“错误：对象作为 React 子项无效（找到：带有键 {branchStock、product、lastOrder、productFocusId、qtySuggestion、orderQuantity} 的对象）。如果您打算呈现一个集合的 ” ？

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

“反应表-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',
        sortable: false,
        headerStyle,
        className: 'column-odd',
        Cell: ({ row, original }) => {
          console.log('ori', original)
          return <p>tes</p>
        }
      },
      {
        Header: 'Price',
        accessor: 'product.hnaPrice',
        sortable: false,
        headerStyle,
        className: 'column-odd',
      },
      {
        Header: 'Promo',
        accessor: '',
        sortable: false,
        headerStyle,
        className: 'column-odd',
      },
      {
        Header: 'Branch Stock',
        accessor: 'branchStock',
        sortable: false,
        headerStyle,
        className: 'column-odd',
      },
      {
        Header: 'Quantity Suggestion',
        accessor: 'qtySuggestion',
        sortable: false,
        headerStyle,
        className: 'column-odd',
      },
      {
        Header: 'Order Quantity',
        accessor: '',
        sortable: false,
        headerStyle,
        className: 'column-odd',
      },
      {
        Header: 'SubTotal',
        accessor: '',
        sortable: false,
        headerStyle,
        className: 'column-odd',
      },
    ]

在其他页面上，根据 API 的响应，该表适用于不同的数据

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

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

0 回答 0