javascript - 如果爱好在不同的组件中，则在渲染时使用 onClick 过滤项目的最佳方法是什么？

Question

我有一个 HobbyList 组件，它处理显示用于按爱好过滤的硬编码爱好列表，以及另一个呈现来自 api 的所有爱好的卡片的组件。我在硬编码的爱好列表上有一个 onclick，它将捕获价值。我正在考虑通过 redux 将此值传递给 HobbyCard 组件，以用于过滤数据并仅显示该特定爱好。redux 是最好的方法吗？Cards 组件在收到值后可以处理其余部分的最佳方式是什么？我正在考虑检查状态中的值是否返回然后执行过滤器功能，但我对如何正确完成感到困惑。

HobbyList 组件：

const [selectedHobby, setSelectedHobby] = React.useState('')

const handleSelectedHobby = (hobbyValue) => {
        const hobbyName = sortedHobbiesList
            .filter(hobby => hobby.value === hobbyValue)
            .map(hobby => hobby.value)
            .toString();
        setSelectedHobby(hobbyName);
        // dispatch selectedHobby
        selectHobby(selectedHobby);
};

return (
           <ul className="hobby" key={'hobby'}>
               {sortedSportsList.map((hobby) => {
                   return (
                       <li key={hobby.value}>
                           <OlympicsSportButton
                               label={hobby.label}
                               onClick={() => handleSelectedHobby(hobby.value)}
                           />
                       </li>
                   );
               })}
           </ul>
    );

HobbyCard 组件：

const mapStateToProps = (state) => ({
     hobby: state.hobby
})

// This hobbyData is coming from an API
const [hobbyData, setHobbyData] = React.useState([]);
// Filtered hobbyData
const [filteredHobbyData, setFilteredHobbyData] = React.useState([]);

const filterHobbyData = () => {
     const filteredHobbyList = hobbyData.filter(item => item.hobby === hobby);
     
     setFilteredHobbyData(filteredHobbyList)
}

// This gives a minified error and doesn't seem correct to me
if (hobby) {
     filterHobbyData()
}

return (
     <div className="hobbies-card">
            {filteredHobbyData.length
                ? filteredHobbyData.map(hobby=> {
                      const { id, title, hobbyName} = hobby;
                      return (
                         <HobbyCard
                             key={id}
                             title={title}
                             eventId={id}
                             hobby={hobby}
                         />
                      );
                  })
               : 'No hobbies'
       </div>
)

标签： javascriptreactjs