如何在 React JS 的功能组件中条件渲染 map

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 调用接收到的响应数据存储在 state 变量 resp_data 中。

如果 resp_data 长度不为零，我需要遍历列表并检查字段值“looking_for”是否等于“work”

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

如果 resp_data 长度为零，则显示“数组长度为零”

这是我想实现的，但我找不到功能组件的很多答案。 我已经尝试了很多可能的方法，比如换牙套、更换牙套等……我真倒霉。

任何帮助是极大的赞赏。

Answer 1

您没有从“地图”function 返回任何内容。

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>)
          )
        )