reactjs - 为什么大括号内的内容没有在 React.js 中渲染
问题描述
我有以下 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
解决方案
您在地图中缺少return
声明。historyStack
以下应该有效(鉴于您的条件是正确的): -
historyStack && historyStack.map((item, key) => {
return <p key={key}>{`${item.label} -->`}</p>
})
以下也将起作用(隐式返回):
historyStack && historyStack.map((item, key) =>
<p key={key}>{`${item.label} -->`}</p>
)
推荐阅读
- android - 我想从可绘制的图像中设置数组,但不知道如何在 kotlin 上做到这一点
- jquery - 将可放置的 div 拖到背景图像上的特定点
- php - fwrite php,变量为字符串
- docker-compose - 当脚本试图在 Dockerfile 中查找 .sh 时出现错误“未找到”
- c++ - 如何在隐藏源文件的 Linux 中编译 C++ 代码?
- python - 在 Windows 操作系统中运行 pyspark (Anaconda - Spyder)
- css - css - 最新 chrome 中的 webkit-text-fill-color 问题
- c# - C#输入键,一键点击,所以按住不响应
- sql-server - 对于每个容器在返回 0 行时没有失败
- jquery - 使用本地存储中的数据创建提交表单