基于函数返回的条件类名[重复]

Question

在我的 React 项目中，我尝试根据每个项目在我从本地存储中获取的数组中的存在情况为每个项目设置不同的图标。

table.js

import React from 'react';
import isMovieInFavorites from './favorites';

class Table extends React.Component {
  constructor(props){
    super(props);
    this.state = {
        movies: [],
        //other state vars
    }
  }

  //some other codes
  render(){
      return (
        <div className="table-container">
          <table>
            {this.state.movies.map((row) => (
              <tr key={row.id}>
                <td>{row.title}</td>
                <td className="icon"><i className={(isMovieInFavorites(row.id) ? "fas" : "far") + " fa-star"}></i></td>
              </tr>
            ))}
          </table>
        </div>
      );
  }
}

我正在尝试根据来自

的isMovieInFavorites(id) 在fas 和far 之间更改类名

favorites.js

function isMovieInFavorites(id){
  let movieArray = localStorage.getItem('faveMovieList') ? JSON.parse(localStorage.getItem('faveMovieList')) : [];
  movieArray.forEach((movie)=>{
    if(movie.id === id)
      return true;
  });
  return false;
}

我想这部分我做得很好：

{(isMovieInFavorites(row.id) ? "fas" : "far") + " fa-star"}

如果我检查console.log（在favorites.js 内）中的结果，条件会很好。此外，如果我执行{(row.id == 10 ? "fas" : "far") + " fa-star"} 之类的操作，它也可以正常工作。但是调用函数并以某种方式检查结果不起作用，并且总是会应用类far，即使结果是true。

我在这里缺少什么？这种情况调用函数有错吗？

导出默认 isMovieInFavorites;

Answer 1

这里的问题在于你的函数，forEach 不会从回调中返回任何内容，所以函数将始终返回 false

function isMovieInFavorites(id){
  let movieArray = localStorage.getItem('faveMovieList') ? JSON.parse(localStorage.getItem('faveMovieList')) : [];
  movieArray.forEach((movie)=>{
    if(movie.id === id)
      return true;
  });
  return false;
}

您需要改用some 或简单的for 循环

function isMovieInFavorites(id){
  let movieArray = localStorage.getItem('faveMovieList') ? JSON.parse(localStorage.getItem('faveMovieList')) : [];
  return movieArray.some(movie => movie.id === id)
}