reactjs - 使用 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>
  );
};

标签： reactjsreact-hooks

Answer 1

添加了在 setStoryUrl 之前清除 storyIds 的功能

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