React中实现点击提名按钮添加影片到提名数组后禁用该按钮的方法

核心实现逻辑：依托每部影片唯一的imdbID作为校验标识，动态判断当前影片是否已存在于提名数组中，以此控制按钮的可用状态。全程依托React单向数据流自动同步状态，不需要额外维护冗余的本地状态。

分步改造步骤 #

• 改造搜索结果列表组件的渲染逻辑
  遍历每部待展示的影片时，先通过数组some方法校验该影片是否已在提名数组中，把校验结果绑定到按钮的disabled属性上，同时补充简单的禁用态样式，区分可用/不可用状态。
  改造后的ResultsList组件参考代码：

  const ResultsList = (props) => {
      const NominateButton = props.nominateButton
      return (
         <>
         {props.movies.map((movie) => {
           // 实时校验当前影片是否已被提名
           const isMovieNominated = props.nominations.some(
              nominatedItem => nominatedItem.imdbID === movie.imdbID
           )
           return (
              <div className="image-container d-flex justify-content-center align-items-center m-3">
                 <img src={movie.Poster} alt="movie-poster"></img>
                 <button 
                    onClick={() => props.handleNominationsClick(movie)} 
                    disabled={isMovieNominated}
                    className="overlay d-flex align-items-center justify-content-center"
                    style={{
                      opacity: isMovieNominated ? 0.5 : 1,
                      cursor: isMovieNominated ? 'not-allowed' : 'pointer'
                    }}
                 >
                     <NominateButton  />
                 </button>
             </div>
           )
         })}
         </>
      )
  }
  

• 给提名方法加兜底校验
  即使前端按钮已经做了禁用，也要在nominateMovie方法里加一层重复判断，避免因状态更新时序问题出现重复添加的异常：
  改造后的nominateMovie方法：

  const nominateMovie = (movie) => {
    // 已存在的提名直接终止执行，不重复入列
    if (nominations.some(item => item.imdbID === movie.imdbID)) return
    const newNominationsArray = [...nominations, movie];
    setNominations(newNominationsArray);
  }
  

• 状态回滚自动适配
  因为按钮的禁用状态是实时从父组件传入的nominations数组计算得到的，当用户从提名列表移除某部影片时，对应的影片提名按钮会自动恢复可用，不需要额外写联动逻辑，完全靠React的状态渲染机制自动同步。

注意：不要为每部影片单独维护“是否已提名”的本地状态，这类冗余状态很容易出现和全局提名数组不同步的问题，直接以全局提名数组的内容作为唯一判断依据，是最稳定的实现方式。

内容的提问来源于stack exchange，提问作者Matthew