使用useEffect在状态更改时重新呈现

Question

应用程序不会在状态更改时重新呈现不同的数据。

开发工具中的状态会发生变化，但不会显示在页面上。

使用按钮进行过滤。

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

Answer 1

增加了在setStoryUrl前清除storyIds的功能

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