在反应中过滤掉用户

Question

所以我是新手，有一本书和一个任务，我需要通过点赞来过滤掉用户，点赞最多的用户必须在最前面，但我也不知道该怎么做我按下一个用户，所有用户的 upvote 状态都发生了变化，有人能帮忙吗？我做错了什么或者我做错了什么

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





 
const Items = [
{
  img: "https://pbs.twimg.com/profile_images/1219033860991848448/UKWAPwfG_400x400.jpg",
  header:"Netlify, our Conversion from Angular to React",
  website:"netlify.com",
  timeAuthor:"Submitted  9 hours ago by brianlammar",

},
{
  img:"https://pbs.twimg.com/profile_images/1825094360/random_dude_400x400.jpg",
  header:"React in patterns - List of design patterns ragaca",
  website:"github.com",
  timeAuthor:"Submitted 9 hours ago by  magenta_placenta",

},
{
  img:"https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/c8366146-25b7-49b3-a640-58439d2a2baa/d5gs9sv-0c98ab64-0f32-4c6d-90ed-39d38d2bf0ba.jpg/v1/fill/w_900,h_675,q_75,strp/random_dude_who_lives_near_me_by_misa_amane_17_d5gs9sv-fullview.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9Njc1IiwicGF0aCI6IlwvZlwvYzgzNjYxNDYtMjViNy00OWIzLWE2NDAtNTg0MzlkMmEyYmFhXC9kNWdzOXN2LTBjOThhYjY0LTBmMzItNGM2ZC05MGVkLTM5ZDM4ZDJiZjBiYS5qcGciLCJ3aWR0aCI6Ijw9OTAwIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmltYWdlLm9wZXJhdGlvbnMiXX0.YP5o5wapk-q4-6vpQIKaERchdyvNl8MOAs_cbG7ThfU",
  header:"Redux vs Mobx vs Flux vs... Do you even...",
  website:"goshakkk.name",
  timeAuthor:"Submitted 8 hours ago by goshakk",

}
]
  class App extends Component{
    
   constructor(props){
     super(props)
     this.state= {
       count:0 
     }
   }
   incremento(){
     this.setState({
       count:this.state.count + 1
     })
   }
   decremento(){
     this.setState({
       count:this.state.count -1 
     })
   }
  
   render(){

    
     return (
    
    Items.map(item =>{
      return (
        <div>
          <div className='section'>
          <span className='Votes'>
          <i  onClick={() => this.incremento()}  className="fas fa-arrow-up"></i>
          <p>{this.state.count}</p>
          <i  onClick={() => this.decremento()} className="fas fa-arrow-down"></i>
          </span>
          <img src={item.img}  />
          <div className='Content'>
            <h1 className='h'>{item.header}</h1>
            <p>{item.website}</p>
            <p>{item.timeAuthor}</p>
            <span className='lil'>
            <p className='red'>10 Comments</p>
            <p>share</p>
            <p>save</p>
            <p>hide</p>
            <p>report</p>
            <p>pocket</p>
            </span>
          </div>
          </div>
        </div>
      )
    
      })
     )
    }
  }
 
  
 
export default App;

Answer 1

每个用户的计数都在增加，因为您维护的 count 状态并不特定于某个用户。它是一个通用的通用计数器。

你可以做的是，

摆脱 count 状态。
添加一个 users 状态，这将是一个用户数组，每个用户都有一个计数。类似于：

this.state = Items.map(i => ({...i, count: 0}))

将 id 传递给 incremento(id) 和 decremento(id) 方法。
现在这样，您可以仅更新在 incremento() 和 decremento() 方法中单击 up/down 按钮的用户的计数
并且在render方法中，可以按count字段对Items数组进行排序，然后对每个用户进行渲染。

这样，您可以只为点击的用户增加计数，并按计数降序排列用户。

Answer 2

它应该是这样的： https://codesandbox.io/s/gracious-glitter-jw34l?file=/src/App.js

 import React { useState } from "react";
 import Nav from './Nav';
 import './App.css';

    
    const Items = [
        {
          id: 1,
          count: 0,
          img:
            "https://pbs.twimg.com/profile_images/1219033860991848448/UKWAPwfG_400x400.jpg",
          header: "Netlify, our Conversion from Angular to React",
          website: "netlify.com",
          timeAuthor: "Submitted  9 hours ago by brianlammar"
        },
        {
          id: 2,
          count: 0,
          img:
            "https://pbs.twimg.com/profile_images/1825094360/random_dude_400x400.jpg",
          header: "React in patterns - List of design patterns ragaca",
          website: "github.com",
          timeAuthor: "Submitted 9 hours ago by  magenta_placenta"
        },
        {
          id: 3,
          count: 0,
          img:
            "https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/c8366146-25b7-49b3-a640-58439d2a2baa/d5gs9sv-0c98ab64-0f32-4c6d-90ed-39d38d2bf0ba.jpg/v1/fill/w_900,h_675,q_75,strp/random_dude_who_lives_near_me_by_misa_amane_17_d5gs9sv-fullview.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9Njc1IiwicGF0aCI6IlwvZlwvYzgzNjYxNDYtMjViNy00OWIzLWE2NDAtNTg0MzlkMmEyYmFhXC9kNWdzOXN2LTBjOThhYjY0LTBmMzItNGM2ZC05MGVkLTM5ZDM4ZDJiZjBiYS5qcGciLCJ3aWR0aCI6Ijw9OTAwIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmltYWdlLm9wZXJhdGlvbnMiXX0.YP5o5wapk-q4-6vpQIKaERchdyvNl8MOAs_cbG7ThfU",
          header: "Redux vs Mobx vs Flux vs... Do you even...",
          website: "goshakkk.name",
          timeAuthor: "Submitted 8 hours ago by goshakk"
        }
      ],
      User = ({ counterChange, item }) => (
        <div>
          <div className="section">
            <span className="Votes">
              <i
                onClick={() => {
                  counterChange(1);
                }}
                className="fas fa-arrow-up"
              >
                UP
              </i>
              <p>{item.count}</p>
              <i
                onClick={() => {
                  counterChange(-1);
                }}
                className="fas fa-arrow-down"
              >
                DOWN
              </i>
            </span>
    
            <img src={item.img} />
            <div className="Content">
              <h1 className="h">{item.header}</h1>
              <p>{item.website}</p>
              <p>{item.timeAuthor}</p>
              <span className="lil">
                <p className="red">10 Comments</p>
              </span>
            </div>
          </div>
        </div>
      );
    
    const App = () => {
      const [items, setItems] = useState(Items);
    
      return (
        <>
          {items
            .sort((a, b) => (a.count < b.count ? 1 : -1))
            .map((item) => (
              <User
                item={item}
                counterChange={(value) => {
                  const index = items.findIndex((d) => d.id === item.id),
                    a = [...items];
                  a[index].count = a[index].count + value;
                  setItems(a);
                }}
              />
            ))}
          ;
        </>
      );
    };
    
    export default App;

在反应中过滤掉用户

filtering out users in react

javascript

css

reactjs

project