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

我正在尝试根据

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

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。

我在这里想念什么？在这种情况下调用函数是否错误？

导出默认为“ MovieInFavorites”；

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

基于函数返回的条件类名

1 个答案: