reactjs - 如何比较两个表是否存在数据并在reactjs中设置检索数据的颜色

Question

我有两个表，其中一个包含不同的作业 ( joblist)，另一个是 ( savedjobs)，其中存储了该特定作业的副本joblist。这类似于为作业添加书签以供以后使用。

如果我在主屏幕中显示所有作业，我必须看到已保存的作业并突出显示它已保存。

我试过这样：

{joblists &&
  joblists.map(joblist => {
    {
      resultJobs &&
        resultJobs.map(job => {
          if (joblist.id === job.id)
            return (
              <i
                id="heart"
                name={joblist.id}
                className="fas fa-heart float-right pr-4 text-danger"
                onClick={this.saveJob1}
              />
            );
        });
    }
  })
}

但是如果没有保存的工作呢？有人可以帮忙吗？

标签： reactjs

Answer 1

你可以尝试这样的事情：

代码沙盒

const jobList = ['Job A', 'Job B', 'Job C', 'Job D', 'Job E']
const savedJobs = ['Job C', 'Job D', 'Job E']


function App() {

  const resultJobs = jobList.map((job,index) => 
    <li key={index}>
      {job}
      {savedJobs.includes(job) ? 
        <React.Fragment>
          <span>---</span>
          <FontAwesomeIcon icon={faHeart} style={{color:'red'}}/>
        </React.Fragment>
        : ''}
    </li>
  );


  return (
    <ul>
      {resultJobs}
    </ul>

  );
}