在 state 上重新渲染使用 useEffect 更改

Question

App won't re render different data on state change.

State does change in the dev tools but doesn't show on page.

Using button to filter.

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

Added a function that clears storyIds before setStoryUrl

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