повторный рендеринг при изменении состояния с помощью useEffect - PullRequest
Новая
       3

повторный рендеринг при изменении состояния с помощью useEffect

0 голосов
/ 18 июня 2020

Приложение не будет повторно отображать разные данные при изменении состояния.

Состояние меняется в инструментах разработчика, но не отображается на странице.

Использование кнопки для фильтрации. 

export const StoriesPage = () => {
  const [storyIds, setStoryIds] = useState([]);
  const [storyUrl, setStoryUrl] = useState('top');

  useEffect(() => {
    let url = baseUrl;

    storyUrl === 'top'
      ? (url += 'topstories.json')
      : (url += 'newstories.json');

    getStoryIds(url).then(data => setStoryIds(data));
  }, [storyUrl]);

  return (
    <div>
      <div>
        <button onClick={() => setStoryUrl('new')}>New</button>
        <button onClick={() => setStoryUrl('top')}>Top</button>
      </div>
      {storyIds.map((storyId, index) => (
        <Story key={index} storyId={storyId} />
      ))}
    </div>
  );
};

1 Ответ

0 голосов
/ 18 июня 2020

Добавлена ​​функция, очищающая StoryIds перед setStoryUrl 

  const handleFilter = tag => {
    setStoryIds([]);
    setStoryUrl(tag);
  };
...