javascript - 呈现内容而不闪烁的正确方法？ react + 终极版 + TS

Question

您能帮我了解呈现内容的逻辑吗？我正在使用 React、Redux、TS 做宠物项目，但在页面加载时遇到内容呈现问题。

其实有两个问题。

第一个问题:

1. 当我点击卡片时，会发送获取卡片数据的 GET 请求。
2. 卡片的页面已打开(使用 useParams 进行动态路由)
3. 当从服务器接收到数据时，它会发送到 Redux 状态
4. 页面呈现正常(因为初始状态为空)。

然后我点击另一张卡片，这就是问题所在:5) 我点击另一张卡片并发送新日期的 GET 请求。6)此时状态存储之前的卡片数据并渲染它7) 新数据来自服务器和渲染器。8) 在非常短的时间内，我会看到以前的卡数据......它是闪烁的。动图如下

我的问题是:我应该在点击卡片时将卡片状态重置为其初始状态(空状态)吗？或者应该有另一种方法来做到这一点？

第二个问题:为了解决第一个问题，我添加了 onClick 函数，该函数将卡片状态重置为初始状态:

const initialState: IMovieState = {
  movie: {
    filmId: 0,
    nameRu: '',
    nameEn: '',
    webUrl: '',
    posterUrl: '',
    year: 0,
    filmLength: '',
    slogan: '',
    description: '',
    type: '',
    countries: [],
    genres: [],
    rating: {
      rating: 0,
      ratingVoteCount: 0,
      ratingImdb: 0,
      ratingImdbVoteCount: 0,
    },
    images: {
      posters: [],
    },
  },
  isLoading: false,
  movieError: null,
};

这似乎解决了问题 1，但还有另一个...在加载页面上有黄色按钮，图像的替代数据(无法加载)在左上角可见。下面的动图。

我的问题是: 我应该添加一个条件:如果对象键(无论什么键)有数据然后呈现它，或者我应该在状态中添加一个新键，例如 isData: false/true条件将是 if data=true 然后呈现它。

电影页面.tsx

interface IMovieProps {
  filmId: string;
}

const MoviePage: React.FC = () => {
  const { filmId } = useParams<IMovieProps>();
  const dispatch = useDispatch();
  const { isLoading, movie, movieError } = useTypedSelector((state) => state.singleMovie);
  const { nameRu, nameEn, description, posterUrl, year, genres, filmLength } = movie;
  
  useEffect(() => {
    dispatch(fetchMovie(filmId));
  }, [filmId, dispatch]);


  return (
    <section className={styles.section}>

      <div className={styles.backgroundImage} style={{ backgroundImage: `url(${posterUrl})` }} />

      {isLoading && <Preloader />}

      {!isLoading && !!movieError && <Message message={movieError} />}

      {!isLoading && !movieError && (
        <>
          <GoBackLink text={'Назад'} />

          <div className={styles.content}>
            <img src={posterUrl} alt='Постер' className={styles.poster} />
            <div>
              <h1 className={styles.title}>{nameRu}</h1>
              <h2 className={styles.subtitle}>
                {nameEn && `${nameEn}, `}
                <span>{year}</span>
              </h2>
              {filmLength && <p className={styles.subtitle}>Продолжительность: {filmLength} ч</p>}

              <ul className={styles.genresList}>
                {genres.map(({ genre }, idx) => (
                  <Genres genre={genre} key={idx} />
                ))}
              </ul>

              {description && (
                <>
                  <h3 className={styles.heading}>Описание</h3>
                  <p className={styles.text}>{description}</p>
                </>
              )}
            </div>
          </div>
        </>
      )}
    </section>
  );
};

export default MoviePage;

点击卡片的状态:

Answer 1

我喜欢做的是我喜欢使用 useState() 条件以及检查特定键是否有数据。我不会在每次点击前重置状态。相反，我检查特定的 post key 是否已经存在 redux 状态的数据。如果那个特定的键有数据，那么我只使用那个数据，而不是在每次呈现相同的组件时都发出获取请求。如果它没有数据，那么我提出请求。

1- 检查项目键是否已经存在数据。如果它不需要发出获取请求，则使用数据来呈现组件。
2- 将数据连接到 redux 存储。不要覆盖状态。
3-以对象的形式存储数据。其中键是项目的唯一键。这样你就可以检查 key 是否存在(例如:data[key]?.length > 0)


希望对您有所帮助。

// example
  
  const [loading, setLoading] = useState(false);
  const data = useSelector(getItemData) // here getItemData is a seletor from reselect library 
  const dispatch = useDispatch();
  
  
  const hasData = Boolean(data.length)
  useEffect(() => {
    if (hasData) return;
    const fetchData = async () => {
      setLoading(true);
      await dispatch(fetchItems()); // make fetchItems redux thunk async as well
      setLoading(false)
    }

    fetchData()
  }, [condition]);


  if (loading) return <div>Loading ...</div>
  
  return <MyComponent />