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

Question

应用程序不会在 state 更改上重新呈现不同的数据。

State 在开发工具中确实发生了变化，但没有显示在页面上。

使用按钮过滤。

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 的 function

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