使用 React Hooks 添加到收藏夹并从收藏夹中查看？答案

【问题标题】：Add to favourites and view from favourites with React Hooks?使用 React Hooks 添加到收藏夹并从收藏夹中查看？
【发布时间】：2020-07-14 16:32:36
【问题描述】：

我有一个状态

const [ideas, setIdeas] = useState([{title:"test", favourite:false]);

组件Idea.jsx 返回props.title 和一个按钮“fav”。

App.jsx 映射通过idea[] 并渲染每个idea.title

<Item title = {idea.title}/>

在页面上。

问题： 每次点击 "fav" 时，我都想切换ideas[index].favourite。如何仅为被点击的idea 更改favourite 的值？

如何将这个精确的idea 添加到数组favourites[]？

App.jsx

   function App() {

const [ideas, setIdeas] = useState([{title:"test", 
favourite:false}]);

const [isClicked, setIsClicked] = useState(false)

function showAllIdeas () {
setIsClicked(prevValue => {
return !prevValue
}
)
}
function mapIdeas(){return ideas.map((ideaItem, index) => {
    return (<Idea
          key = {index}
         id = {index}
         title = {ideaItem.title} 
     />
     
     );
 })}

 return ( <div>


 <Fab  color="primary" onClick={showAllIdeas}>{expandText()}</Fab>
 {isClicked && mapIdeas()}

 </div>)
 }

Item.jsx

function Idea(props) {

const [isClicked, setIsClicked] = useState(false)

function handleClick(){

 setIsClicked(prevValue => {
    return !prevValue  
 })
}
 console.log(isClicked)

return(
<div className={"idea-list" } ><p>{props.title} {isClicked ? 
<StarIcon onClick={handleClick}/> :<StarBorderIcon onClick=. 
{handleClick}/>}</p>

</div>

)
}

【问题讨论】：

你应该添加代码sn-p。
看到这个demo

标签： javascript arrays reactjs filter react-hooks

【解决方案1】：

const handleFavToggle = (index) => {
   setItems(items=> {
      const data = [...items]
      data[index] = {...data[index],favourite: !data[index].favourite }
      return data
   })
}

<Item key={index} title={item.title} index={index} handleFavToggle={handleFavToggle}/>

在项目组件中，您必须使用 handleFavToggle 处理点击并传递所有参数

【讨论】：