对项目范围做出反应

Question

我正在尝试学习React并构建一个从Reddit API中提取的简单应用程序。我现在想要做的是添加一个虚拟的星形按钮，该按钮以边框​​开始为空，并且在单击时被填充，就像用户能够喜欢该帖子一样。我最初将start的状态设置为false，当用户单击start时，状态将设置为true并切换星形。我现在的问题是，单击该链接时，它正在执行我想要的操作，但是正在更改每个帖子的星形样式，而不仅是单击该帖子的那个帖子。所以我想做的是将状态保持在单击星形的发布项的范围内。这是我的代码当前的样子：

import React, { Component } from 'react';
import './Card.css';

import axios from 'axios';
import SortControls from './SortControls/SortControls';

import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

import { faStar as faStarRegular } from '@fortawesome/free-regular-svg-icons';
import { faStar as faStarSolid } from '@fortawesome/free-solid-svg-icons';

library.add(
  faStarRegular,
  faStarSolid
)
class Card extends React.Component {
    state = {
        news: [],
        starActive: false,
    };


componentDidMount() {
    axios.get(`https://www.reddit.com/r/funny/hot.json`).then(res => {
        console.log(res);
        this.setState({news: res.data.data.children});
    })
}

render() {


    return (
        <div className="container">
        <SortControls />
        <div className="cards">
            {this.state.news.map((newsItems, i) =>
           <div key={newsItems.data.id} className="card">
           <div className="cardHead"><h3>{newsItems.data.title}</h3></div>
           <div className="cardFooter">
                <div className="cardFooter__container">
                    <a href="#">View</a>
                    <FontAwesomeIcon onClick={() => this.setState({starActive: !this.state.starActive})} icon={ this.state.starActive ? ['fas', 'star'] : ['far', 'star'] } />

                </div>
            </div>
           </div>)}
        </div>
        </div>

    )
}

}


export default Card;

您可以在FontAwesomeIcon组件上看到我的onClick和样式更改。

那么我是为了将状态保持在范围内而将其设置为错误的吗？或者只是一次单击仅更新一颗星而缺少的东西吗？

Answer 1

两种可能的方法：

* 我更喜欢第二个，因为当您单击单个项目时，它不会重新呈现整个新闻列表。

1。当您点击<FontAwesomeIcon />来保持点击的新闻条目ID处于状态时。

this.toggleId(id) {
  const { activeIds } = this.state

  if (activeIds.includes(activeIds)) {
    return this.setState({ activeIds: activeIds.filter(i => i !== id) })
  }

  this.setState({ activeIds: [...activeIds, id] })
}

// Render method ...
const { activeIds } = this.state

<FontAwesomeIcon
  onClick={() => this.toggleId(newsItems.data.id)}
  icon={ activeIds.includes(newsItems.data.id) ? ['fas', 'star'] : ['far', 'star'] } />

2。