Javascript React-onClick无法处理多个方法

我有以下反应组件：

const ParentComponent = () => {

  const [data, setData] = useState()

  // handle these data here and display them

  return <ChildComponent sendData={setData} data={data} />
}

const ChildComponent = ({ data, sendData }) => {
  const toggleStrikethrough = e => {
    e.target.style.textDecoration = e.target.style.textDecoration === 'line-through' ? '' : 'line-through'
    const { booking } = e.currentTarget.dataset

    sendData(booking)
  }

  return (
    <div>
      {data.map(booking => (
        <button key={index} data-booking={booking.name} onClick={toggleStrikethrough}>
          {booking.name}
        </button>
      ))}
    </div>
  )
}

constparentcomponent=（）=>{
const[data，setData]=useState（）
//在此处处理这些数据并显示它们
返回
}
const ChildComponent=（{data，sendData}）=>{
常量toggleStrikethrough=e=>{
e、 target.style.textdearching=e.target.style.textdearching==='line-through'？'''line-through'
const{booking}=e.currentTarget.dataset
发送数据（预订）
}
返回(
{data.map（预订=>(
{booking.name}
))}
)
}

---

如您所见，我的父组件从子组件接收数据，但我的问题是子组件，当我尝试操作样式，同时发送数据时，它不起作用，但只有一个起作用，例如，如果我删除

sendData（预订）

样式会发生变化，如果我删除同一函数中的样式操作

ToggleStreethrough（）

则会将数据发送到父组件，但它们无法协同工作，知道原因吗？

问题是在更新父组件的状态后重新渲染

当您执行

sendData

操作时，它会更新父级的状态。当

状态更新时，它会重新呈现组件，包括所有子组件

理想情况下，您可能希望根据状态中存储的数据来设置组件的样式。
我认为React可能会重新呈现没有文本装饰的按钮。
您可能需要修改传递给ChildComponent的数据中的元素，以便“selected”/“checked”是状态的一部分（布尔值可能有效）

e、 g.如果您的数据当前看起来像：[{name:“foo”}，{name:“bar”}]，您可以对其进行操作，使其成为[{name:“foo”}，{name:“bar”，选中：true}]

所以你可以这样做：

constparentcomponent=（）=>{
const[data，setData]=useState（）
//在此处处理这些数据并显示它们
返回
}
const ChildComponent=（{data，sendData}）=>{
常量toggleStrikethrough=e=>{
const{booking}=e.currentTarget.dataset
sendData（{…预订，选中：true}）
}
返回(
{data.map（预订=>(
{booking.name}
))}
)
}
我已经尝试使用另一个自定义组件来处理样式操纵，但实际上是一样的，不想工作。有趣的是，我还在映射子组件frmo和父组件，如：data.map（（data）=>），所以这个组件不起作用，还有其他想法吗？嗯，如果您仍然被卡住，那么将代码发布到沙箱/代码笔中可能会有所帮助，因为现在有很多信息丢失。