JSX数组.Map只映射第一个项目

Question

初始渲染时没有显示任何内容，但控制台日志显示了3件事:

1. 运行数组包含3个对象(它应该如何)
2. 我两次都使用run。
3. 组件的渲染方法在停止之前运行两次。

如果，在第一次渲染之后，我对脚本进行了更改并保存它，代码将按预期执行，并且所有内容都显示在屏幕上。

这是我如何创建我的对象和填充数组。

const [runs, setRuns] = useState([])
useEffect(() => {
machineDocIDs.map(item => {
fetchProductData(item)
})
},[machineDocIDs])
function fetchProductData(id) {
const productsCollectionRef = collection(db, "RunSheets", "All Runs", "Open", runID, "machines", id, "products")
const q = query(productsCollectionRef)
const productData = []
const IDs = []
const unsubscribe = onSnapshot(q, (querySnapshot) => {
querySnapshot.forEach((doc) => {
productData.push(doc.data())
IDs.push(doc.id)
})
onCreateRunLocation(machines[machineDocIDs.indexOf(id)].machine_name, productData)
})
return () => unsubscribe()
}
function onCreateRunLocation(machine, productData) {
let tempArray = runs
let loc = {machine_id: machine, products: arrangeProducts(productData)}
tempArray.push(loc)
setRuns(tempArray)
}
function arrangeProducts(productData) {
let temp = []
productData.map((item) => (
temp.push({name: item.flavors, quantity_ordered: item.quantity_ordered})
))
return(temp)
}

这是我所有涉及渲染的代码

function renderProduct(product) {
return (
<>
<tr>
<th>{product.name}</th>
<th>{product.quantity_ordered}</th>
</tr>
</>
)
}
function renderLocation(location) {
console.log(location)
console.log(runs)
runs.map((item) => (
console.log(item)
))
return (
<>
<Card>
<Card.Title>{location.machine_id}</Card.Title>
<Card.Body>
<Table>
<tbody>
{location.products.map(item => (
renderProduct(item)
))}
</tbody>
</Table>
</Card.Body>
</Card>
</>
)
}
return ( /* main function return */
<>
<Container>
{runs.map((item) => {
renderLocation(item)
})}
</Container>
</>
)

任何帮助都是感激的。

Answer 1

你需要返回它:

<Container>
{runs.map((item) => {
return renderLocation(item);
})}       
</Container>