所以我是新來的反應，有一本書和一個任務給定我需要通過投票過濾掉用戶，擁有最多投票的用戶必須在頂部，但當我按下一個用戶時我也不知道該怎么做任何人都可以幫助所有用戶的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;
uj5u.com熱心網友回復：
每個用戶的計數都在增加，因為count您維護的狀態不是特定于用戶的。它是一個通用的、常見的計數器。
你可以做的是，
- 擺脫
count狀態。 - 添加一個
users狀態，它將是一個用戶陣列，每個用戶都有一個計數。就像是：
this.state = Items.map(i => ({...i, count: 0}))
- 將 id 傳遞給
incremento(id)anddecremento(id)方法。 - 現在，您可以僅更新在您的
incremento()和decremento()方法中單擊向上/向下按鈕的用戶的計數 - 而在render方法中，可以
Items按欄位對陣列進行排序count，然后渲染每個用戶。
這樣，您可以只增加點擊用戶的計數，并且用戶按計數降序排序。
uj5u.com熱心網友回復：
它應該如下所示：
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 User 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 (
<div>
<div className='section'>
<span className='Votes'>
<i onClick={() => this.incremento()} className="fas fa-arrow-up">UP</i>
<p>{this.state.count}</p>
<i onClick={() => this.decremento()} className="fas fa-arrow-down">DOWN</i>
</span>
<img src={item.img} />
<div className='Content'>
<h1 className='h'>{this.props.item.header}</h1>
<p>{this.props.item.website}</p>
<p>{this.props.item.timeAuthor}</p>
<span className='lil'>
<p className='red'>10 Comments</p>
</span>
</div>
</div>
</div>
)
}
};
const
App = () => (
<>
{Items.map(item =>
(
<User item={item} />
))};
</>);
export default App;
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/416910.html
標籤：