Реакция установки состояния для предмета - PullRequest
Новая
       12

Реакция установки состояния для предмета

0 голосов
/ 11 октября 2018

Я пытаюсь изучить React и создать простое приложение, которое использует Reddit API.Сейчас я пытаюсь добавить фиктивную кнопку со звездочкой, которая начинается с пустой рамки и когда щелчок заполняется, как будто пользователю понравилась запись.Первоначально я установил для начала состояние false, а когда пользователь щелкает по старту, состояние устанавливается равным 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;

Вы можете увидеть мой onClick и изменение стиля в компоненте FontAwesomeIcon.

Поэтому я настроил это неправильно, чтобы сохранить состояние в области видимостиили мне не хватает только одного обновления за клик по одной звезде за раз?

1 Ответ

0 голосов
/ 11 октября 2018

Два возможных подхода:

* Я предпочитаю второй, потому что он не будет повторно отображать весь список новостей, когда вы нажимаете на один элемент.

1.Когда вы нажимаете на <FontAwesomeIcon />, чтобы сохранить идентификаторы newsItems, на которые нажали, в состоянии. 

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.Вместо того, чтобы сохранять все идентификаторы, выбранные нажатием, в <Card />, преобразуйте каждый новостной элемент в отдельный компонент <NewsItem />.

Имея один компонент, вы можете применить ту же логику, что и в примере кода.Поэтому флаг starActive повлияет только на один компонент.

Примерно так: 

// Cards render
<div className="cards">
  { this.state.news.map((newsItem, i) => (
    <NewsItem {...newsItem} key={newsItem.data.id}  />
  ))}
</div>

// NewsItem
class NewsItem extends React.Component {
  state = {
    starActive: false,
  }

  render() {
    const { data } = this.props

    return <div key={data.id} className="card">
      <div className="cardHead"><h3>{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>
  }
}
...