我的 Reactjs 应用程序中是否需要全局 state？

Question

我正在使用按部分过滤的 NY Times API ( https://developer.nytimes.com/docs/most-popular-product/1/overview ) 阅读过去 7 天内浏览次数最多的新闻。 现在看我的用户界面，你会更好地理解：

所以，问题是当我点击时，例如，在纽约部分，新闻出现在部分下方。 为此，我创建了我的ListOfNews组件，其中包含News组件。 但是，当我单击一个部分时，会发生什么，您可以在下一张图片中看到：

鲑鱼背景颜色只是为了很好地了解盒子的大小。 好的。 让我们跳入代码。 这是我的Section组件的代码：

import React, { useState } from 'react';
import { getNewsAttributes } from '../helpers/helpers';
import getNewsFilteredBySection from '../services/getNewsFilteredBySection';
import ListOfNews from './ListOfNews';

export default function Section({ section }) {

  const [news, setNews] = useState(null);

  function showEvent(e) {
    const sectionSearched = e.target.innerText;
    getNewsFilteredBySection(sectionSearched)
      .then((response) => {
        const filteredResults = response;
        const newsAttributes = getNewsAttributes(filteredResults);
        setNews(newsAttributes);
      })
  }

  return (
    <>
      <div className="animate__animated animate__fadeIn animate__slower">
        <h3 className="section-container mr-4 mb-4 pointer"
          onClick={showEvent}
        >{section}</h3>
      </div>
      {news !== null ? <ListOfNews newsAttributes={news} /> : null}
    </>



  )


};

这是我的ListOfNews组件的代码：

import React from 'react';

    export default function ListOfNews({ newsAttributes }) {
    
        return (
            <div className="listofnews-container mb-4">
                <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose injected humour and the like.</p>
            </div>
        )
    
    
    };

稍后我必须将newsAttributes传递给News组件，在那里我将呈现新闻的标题、图像和摘要。 所以，这是我的问题：

a) 无论我点击哪个部分，如何实现我的ListOfNews组件在所有部分下方呈现？ 我想问题目前在我的逻辑中，因为我正在使用组件返回这个组件Section 。

b）我想，问题是逻辑是在Section组件中实现的，那么这可能是实现它的好方法吗？ 你认为在外部助手中实现逻辑可行吗？ 或者也许我需要一个全局 state 经理？ 在这种情况下......你认为哪一个最适合我的需求？ Redux？ 也许 useContext 就足够了？ 非常感谢：）

Answer 1

我认为您正在做的是正确地重复 Section 组件，因此当您渲染一个部分时，它也会渲染新闻，然后渲染下一个部分。 所以你应该做的是首先渲染部分，然后渲染选定部分的新闻。 为此，您需要将所选部分存储在外部组件中。 所以将所有非渲染代码移动到外部/父组件，并将 eventHandler function showEvent给部分组件。

现在外部 function 将获取并存储新闻。

你的外部函数渲染应该是这样的；

sections.map(section => 
<Section key={section} section={section} selectHandler={showNews} />
)
{news !== null ? <ListOfNews newsAttributes={news} /> : null}

我希望这是有道理的。

关于你的第二个问题，看起来你对反应很陌生，所以我建议不要这样做。 如果您的项目只是这个组件，您肯定不需要它，如果您有很多组件需要共享 state，您可能需要一个，上下文可以明确帮助，但我看到您正在获取一些数据，并且 react-query也可能会有所帮助，因为它会进行一些缓存，并且记录得很好，而且开始起来并不难。