Reactjs 警告：列表中的每个子项都应具有唯一的；“关键”；道具反应器_Reactjs

Reactjs 警告：列表中的每个子项都应具有唯一的；“关键”；道具反应器

reactjs

Reactjs 警告：列表中的每个子项都应具有唯一的；“关键”；道具反应器,reactjs,Reactjs,您好，我无法获取json文件中的数据对象，请给出运行此代码的建议。未捕获（承诺中）错误：对象作为React子对象无效（找到：具有键的对象{current_page，data，first_page_url，from，last_page，last_page_url，next_page_url，path，per_page，prev_page_url，to，total}）。如果要呈现子对象集合，请改用数组 import React, { useState, useEffect } from 're

您好，我无法获取json文件中的数据对象，请给出运行此代码的建议。未捕获（承诺中）错误：对象作为React子对象无效（找到：具有键的对象{current_page，data，first_page_url，from，last_page，last_page_url，next_page_url，path，per_page，prev_page_url，to，total}）。如果要呈现子对象集合，请改用数组

   import React, { useState, useEffect } from 'react';
   import axios from './axios';
   import './App.css';


   function App() {
     const [transactions, setTransactions] = useState([]);

     useEffect(() => {
         const fetchUrl = {};

         async function fetchData(){
          const request = await axios.get(fetchUrl);
          setTransactions(request?.data?.payload);
    
          return request;
        }
        fetchData();
   }, []);

  console.log(transactions);


  return (
    <div className="wrapper">
    <h2>Transactions</h2>
    <p>Current Page {transactions?.current_page}</p>
    <table>
     <tr>
      <th>Id</th>
      <th>Quantity</th>
      <th>datetime</th>
     </tr>
     if ({transactions}) {
      transactions?.data?.map(transaction => (
        <tr>
          <td key={transaction.ID_PAYMENTS}>{transaction.ID_PAYMENTS}</td>
          <td key={transaction.ID_PAYMENTS}>{transaction.CardOnHand}</td>
          <td key={transaction.ID_PAYMENTS}>{transaction.CardSystem}</td>
        </tr>
       ) )
      }        
    </table>
    </div>
   );
  }

  export default App;

如果要渲染某个对象，必须将其括在{}中

您没有从映射函数返回任何内容

结束标记之前没有空格/

您正在检查事务是否存在，但仍然无缘无故地使用可选链接。如果是无效的回报

JSX数组必须具有密钥属性

import React，{useState，useffect}来自“React”；
从“/axios”导入axios；
导入“/App.css”；
函数App（）{
const[transactions，setTransactions]=useState（[]）；
useffect（（）=>{
const fetchUrl={}；
异步函数fetchData（）{
const request=wait axios.get（fetchUrl）；
setTransactions（请求？.data？.payload）；
返回请求；
}
fetchData（）；
}, []);
返回(
交易
当前页面{事务？.当前页面}
身份证件
量
日期时间
{transactions？.data？.map（（事务，索引）=>(
(
{transaction.ID_PAYMENTS}
{transaction.CardOnHand}
{transaction.CardSystem}
)
))}
);
}
导出默认应用程序；

如果要渲染某个对象，必须将其括在{}中

您没有从映射函数返回任何内容

结束标记之前没有空格/

您正在检查事务是否存在，但仍然无缘无故地使用可选链接。如果是无效的回报

JSX数组必须具有密钥属性

import React，{useState，useffect}来自“React”；
从“/axios”导入axios；
导入“/App.css”；
函数App（）{
const[transactions，setTransactions]=useState（[]）；
useffect（（）=>{
const fetchUrl={}；
异步函数fetchData（）{
const request=wait axios.get（fetchUrl）；
setTransactions（请求？.data？.payload）；
返回请求；
}
fetchData（）；
}, []);
返回(
交易
当前页面{事务？.当前页面}
身份证件
量
日期时间
{transactions？.data？.map（（事务，索引）=>(
(
{transaction.ID_PAYMENTS}
{transaction.CardOnHand}
{transaction.CardSystem}
)
))}
);
}
导出默认应用程序；

您不能在报税表中使用

if

子句

在

map

函数中，返回的每个组件都应该有一个唯一的键

{transactions？.data？.length&&transactions.data.map（事务=>
{transaction.ID_PAYMENTS}
{transaction.CardOnHand}
{transaction.CardSystem}
}

您不能在报税表中使用

if

子句

在

map

函数中，返回的每个组件都应该有一个唯一的键

{transactions？.data？.length&&transactions.data.map（事务=>
{transaction.ID_PAYMENTS}
{transaction.CardOnHand}
{transaction.CardSystem}
}

当您在数组上映射并返回元素时，您需要在最外面的元素上设置一个键。因此三条
td
行实际上不需要一个
键
。它们周围的
tr
需要一个
键，而且它没有 “对象作为React子对象无效”错误是由于if（{transactions}）{ 中的语法错误造成的。您需要所有Javascript代码，包括if 都在花括号内。但是，由于您使用的是可选链接，因此根本不需要if 虽然不是必需的，但是您可以对表的HTML语法进行一些改进。您可以在标题和正文周围添加和标记。您可以向标题行中的元素添加scope=“col” 。如果愿意，您可以使用ID列作为行标题 return ( <div className="wrapper"> <h2>Transactions</h2> <p>Current Page {transactions?.current_page}</p> <table> <thead> <tr> <th scope="col">Id</th> <th scope="col">Quantity</th> <th scope="col">datetime</th> </tr> </thead> <tbody> {transactions?.data?.map((transaction) => ( <tr key={transaction.ID_PAYMENTS}> <th scope="row">{transaction.ID_PAYMENTS}</th> <td>{transaction.CardOnHand}</td> <td>{transaction.CardSystem}</td> </tr> ))} </tbody> </table> </div> ); 返回( 交易当前页面{事务？.当前页面} 身份证件量日期时间 {transactions？.data？.map（（事务）=>( {transaction.ID_PAYMENTS} {transaction.CardOnHand} {transaction.CardSystem} ))} ); 当你映射一个数组并返回元素时，你需要在最外面的元素上设置一个键。因此三行td 实际上不需要一个键。它们周围的tr 确实需要一个键，而且没有 “对象作为React子对象无效”错误是由于if（{transactions}）{ 中的语法错误造成的。您需要所有Javascript代码，包括if都在花括号内。但是由于您使用的是可选链接，因此不需要< import React, { useState, useEffect } from 'react'; import axios from './axios'; import './App.css'; function App() { const [transactions, setTransactions] = useState([]); useEffect(() => { const fetchUrl = {}; async function fetchData() { const request = await axios.get(fetchUrl); setTransactions(request?.data?.payload); return request; } fetchData(); }, []); return ( <div className="wrapper" > <h2>Transactions </h2> <p> Current Page {transactions?.current_page} </p> <table> <tr> <th>Id </th> <th> Quantity </th> <th> datetime </th> </tr> {transactions?.data?.map((transaction, index) => ( (<tr key={index}> <td key={transaction.ID_PAYMENTS} > {transaction.ID_PAYMENTS} </td> < td key={transaction.ID_PAYMENTS} > {transaction.CardOnHand} </td> < td key={transaction.ID_PAYMENTS} > {transaction.CardSystem} </td> </tr>) ))} </table> </div> ); } export default App; { transactions?.data?.length && transactions.data.map(transaction => <tr> <td key={transaction.ID_PAYMENTS}>{transaction.ID_PAYMENTS}</td> <td key={transaction.ID_PAYMENTS}>{transaction.CardOnHand}</td> <td key={transaction.ID_PAYMENTS}>{transaction.CardSystem}</td> </tr> } return ( <div className="wrapper"> <h2>Transactions</h2> <p>Current Page {transactions?.current_page}</p> <table> <thead> <tr> <th scope="col">Id</th> <th scope="col">Quantity</th> <th scope="col">datetime</th> </tr> </thead> <tbody> {transactions?.data?.map((transaction) => ( <tr key={transaction.ID_PAYMENTS}> <th scope="row">{transaction.ID_PAYMENTS}</th> <td>{transaction.CardOnHand}</td> <td>{transaction.CardSystem}</td> </tr> ))} </tbody> </table> </div> );