如何在react js的函数组件中有条件地渲染内部映射

Question

我有一个数组。我想在其中迭代并进行条件检查，并显示正确的元素。我使用的是功能组件。

下面是一个例子：

import React, { useState, useEffect } from "react";
function Job(props) {
const [resp_data, setdata] = useState("");
const [look, setlook] = useState("");
useEffect(() => {
//    some api calls happen here and response data is stored in state resp_data
}, [props]);
return (
<>
<div className="product_list">
{resp_data.length > 0
? resp_data.map((item) => {
{item.looking_for === "work" ? (
<div className="card-rows work" key={item.id}>
work
</div>
) : (<div className="card-rows no_work" key={item.id}>
No work
</div>)
}
})
: <div>array length is 0</div>}
</div>
</>
);
}
export default Job;

从useEffect内部发生的api调用接收到的响应数据存储在状态变量resp_data中。

如果resp_data长度不为零，我需要迭代列表并检查字段值"是否为零；查找"；等于"；工作；

如果为true，则显示一个组件，否则显示另一个组件。

如果resp_ data length为零；数组长度为零"；

这是我想要实现的，但我找不到很多功能组件的答案。我已经尝试了很多可能的方法，换牙套等等。我运气不好。

非常感谢您的帮助。

Answer 1

您不会从"map"函数返回任何内容。

resp_data.map((item) => (
item.looking_for === "work" ? (
<div className="card-rows work" key={item.id}>
work
</div>
) : (<div className="card-rows no_work" key={item.id}>
No work
</div>)
)
)