为什么React.js中花括号里面的内容没有渲染

Question

我有以下 React 功能组件，但花括号中的内容没有呈现，我试图向用户展示他们过去在 historyStack 中的操作。这些花括号中的逻辑没有得到执行，我不明白为什么。我没有使用单独的组件，因为到目前为止我只是在测试。提前致谢。

import React, {useState, useEffect} from 'react'
//import { getData } from '../shared/api'

const App = () => {
  useEffect(() => {
    let isMounted = true
    fetch('api/config.json')
        .then((response) => response.json())
        .then((config) => {
          isMounted && setInitData(config)
        })
    return () => { isMounted = false }
  }, [])

  const [historyStack, setHistoryStack] = useState([])
  const [initData, setInitData] = useState({})

  // Adds item to the history stack
  const handleClick = (item) => {
    setHistoryStack(historyStack.concat(item))
  }

  // Handles back action and removes the last item from the history stack
  const handleBack = () => {
    const updatedHistory = [...historyStack]
    updatedHistory.pop()
    setHistoryStack(updatedHistory)
  }

  // Load the inital data received from the API call
  const loadData = () => {
    setHistoryStack(historyStack.concat(initData))
  }

  const latestItem = historyStack[historyStack.length -1]

  return (
    <div>
      <h1>Produktfinder</h1>
      {
        !latestItem  && <button onClick={() => loadData()}>Start</button>
      }
      {        
        historyStack && historyStack.map((item, key) => {
          <p key={key}>{`${item.label}   -->`}</p>
      })}
      {
        latestItem && 
        <div>
          <h2>{latestItem.label}</h2>
          <p>{latestItem.question}</p>
        </div>
      }
      {
        latestItem && latestItem.children.map((item, key) => 
          <div key={key}>
            <button onClick={() => handleClick(item)}>{item.label}</button>
          </div>
        )
      }
      {   
       latestItem && <button onClick={() => handleBack()}>Zurück</button>
      }
    </div> 
  )
}

export default App

Answer 1

您在 historyStack 地图中缺少 return 语句。以下应该有效（假设您的条件正确）：-

historyStack && historyStack.map((item, key) => {
          return <p key={key}>{`${item.label}   -->`}</p>
      })

以下内容也有效（隐式 return）：

historyStack && historyStack.map((item, key) => 
          <p key={key}>{`${item.label}   -->`}</p>
      )

为什么React.js中花括号里面的内容没有渲染

Why is the content inside the curly braces not renderering in React.js

reactjs

rendering

react-functional-component