防止单击按钮时更新所有组件

Question

我有一个对象数组，并使用 map 显示它们。与每个组件关联的“+”按钮。 我想在单击按钮时更新特定组件的计数。 我尝试使用以下代码。 但是，它也在更新所有其他组件的计数。 我该怎么做才能解决这个问题？

import { useState } from 'react';
import { people } from './Data.js';

function App() {
  const[count,setCount]=useState(0)
  const updateCount=()=>{
    setCount(count+1)
  }
  return (
  <div>
    <h4>List of Items</h4>
    {
      people.map((item)=>{

        return (
        <div key={item.id}>count:{count}
        <button onClick={()=>updateCount}>+</button>
        </div>
        )
        })
    }
    </div>
  );
}

export default App; 

Answer 1

如果你想更新单个组件的计数，你需要在子组件中初始化 useState。 提取 map 并为返回语句创建一个组件。 考虑以下：

 import { useState } from 'react'; import { people } from './Data.js'; function ChildComponent(props){ const[count,setCount]=useState(0) const updateCount=() => { setCount(prev => prev + 1) } return (<div> count:{count} <button onClick={()=>updateCount()}>+</button> </div>) } function App() { return ( <div> <h4>List of Items</h4> { people.map((item)=>{ return ( <ChildComponent key={item.id}/> ) }) } </div> ); } export default App;

Answer 2

您需要单独管理 state。 这是一个可能的选择，希望它有所帮助。

import React,{ useState } from 'react';
import { people } from './Data.js';

function PeopleItem(props) {
const[count,setCount]=useState(0)
const updateCount=()=>setCount(count+1)
const {item} = props
return <div>count:{count}
      <button onClick={updateCount}>+</button>
  </div>
}


export function App() {
return (
<div>
  <h4>List of Items</h4>
  {
    people.map((item)=> <PeopleItem key={item.id} item={item}/>)
  }
  </div>
);
}