React 初级开发人员 [关闭]答案

【问题标题】：React Junior Developer [closed]React 初级开发人员 [关闭]
【发布时间】：2021-08-11 05:30:19
【问题描述】：

我想以数组格式显示标题，以便可以在 UI 中看到。但是我不确定如何使用 JSX 语法。

const { data: CartData, error: CartError } = useSWR(`http://localhost:3060/user/Carts`, fetcher)

console.log(CartData)

Object
email: alstntorl@naver.com
id: 1
Cartd: Array(4)
0: {id: 1, 
Title: 나이키 x 앰부쉬 덩크  딥 로얄 블루, 
 …}
1: {id: 11, 
Title: 뉴발란스 2002R 그레이, 
 …}
2: {id: 34, Title: 컨버스 하이크 하이 블랙 화이트 검,, …}
3: {id: 36, Title: 아디다스 이지 부스트 380 미스트, 10, …}
length: 4

首先，我使用 map 函数以数组格式导入了 Title。

    let Title = CartData?.Carted?.map((list) => list.Title);

【问题讨论】：

标签： javascript reactjs ecmascript-6 frontend

【解决方案1】：

您需要映射单个元素才能在 jsx 中显示。您可以映射数组，但它仍然需要有 1 个根。

function MyComponent() {
const { data: CartData, error: CartError } = 
  useSWR(`http://localhost:3060/user/Carts`, fetcher)

  return <div>{CartData?.Carted?.map((item) => <div key={item.Title}> {item.Title} {item.Price} {item.Cintents} </div>)}</div>
}

【讨论】：

只是将它附加到 div 上，但这很愚蠢。谢谢。
@김민수 能解决你的问题吗？
` const renderItems = () => ( CartData?.Cartd?.map((list, index) => ( {list.Title} )) ` {renderItems} 我试图打印出来，但它没有响应。
其实我想打印出价格名称和标题。
@김민수不要使用索引作为键。这将是性能问题。我更新了答案，如果你显示 CartData 的数据结构，我可以回答更准确。

【解决方案2】：

您需要编写组件来呈现这样的结果：

const CardDetails = ({ fetcher }) => {
  const { data, error } = useSWR(`http://localhost:3060/user/Carts`, fetcher)

  // render error/empty states
  if (error) return <div>Failed to load cart</div>
  if (!data) return <div>Loading cart...</div>

  // return the result
  return (
    <div>
      {
        data.carted.map((item) => <span key={item.id}>{item.title}</span>
      }
    </div>
  )
}

// later render the component to the DOM
ReactDOM.render(
  <CardDetails />,
  document.getElementById("root")``
);

【讨论】：