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

Question

I am working in an app to read the most viewed news in the last 7 days using the NY Times API ( https://developer.nytimes.com/docs/most-popular-product/1/overview ) filtered by sections. You will understand better watching my user interface right now:

So, the problem is I would like when I click, for instance, on New York section, the news to appear below the sections. For that I have created my ListOfNews component, which would have inside it News component. But, when I click on a section, what happens it what you can see at the next image:

The salmon background color is just to know well size of the box. Ok. Let's jump into the code. Here the code of my Section component:

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}
    </>



  )


};

Here the code of my ListOfNews component:

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

And later I would have to pass the newsAttributes to the News component, where I would render the title, the image, and the abstract of the news. So, here are my questions:

a) How can I achieve my ListOfNews component to render below all the sections, no matter which section I click? I suppose the problem is currently in my logic, since I am returning this component with the component Section .

b) I suppose, the problem is that logic is implemented in the Section component, so which could be a good way of implementing this? Do you think implementing the logic in a outer helper could work? Or maybe should I need a global state manager? In this case... which one do you think would fit the best my needs? Redux? Maybe useContext would be enough? Thanks a lot:)

Answer 1

I think what you are doing is repeating the Section component right, as a result when you render a section, it also renders the news, and then the next section gets rendered. So what you should do is first render sections, and then render the selected section's news. In order to do that you need to store the selected section in the outer component. so move all the non rendering code to outer/parent component, and pass in the eventHandler function showEvent to the section component.

Now the outer function will fetch and store the news.

your outer functions render should look something like this;

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

I hope that makes sense.

Regarding your second question, looks like you are pretty new to react, so I would recommend not to do that yet. If your project is just this component you definetely dont need it, if you have a lot of component that need to share state, you might need one, context can definetely help, but I see that you are fetching some data, and react-query might also help, as it does some caching, and fairly well documented and not so hard to start with.