React 从子组件到父组件的重新渲染问题

Question

我已经为表 ID 复制到剪贴板和工具提示创建了一个单独的文件，当我复制多个时，将鼠标悬停在图标上时遇到问题，前一个不会按此顺序 id 第一个更改为默认值，如果我单击第二个 id它应该更改已复制并首先返回到复制工具提示。父组件未渲染该组件

父组件 表数组.map

<td>
<CopyID copyText={list?.orderId} rowIndex={i}/> 
</td>                                                                                                                                                                                                                                                                                                                                                                                                                                                       

子组件

import { Tooltip } from 'antd';
import React, { useState } from 'react';
import CopyToClipboard from 'react-copy-to-clipboard';
export const CopyID = ({copyText,rowIndex}) => {
const [triggeredIndex, setTriggeredIndex] = useState(null);
const orderIdCopy = (i) => {
    setTriggeredIndex(i);
};


return (
    <CopyToClipboard text={copyText || ' '} onCopy={() => orderIdCopy(rowIndex)}>
        <Tooltip
            overlayClassName='custom-tooltip-style'
            title={triggeredIndex === rowIndex ? 'Copied' : 'Copy'}
            color={triggeredIndex === rowIndex ? '#018c5c' : 'geekblue'}>
            <i
              key={rowIndex}
                className='bx bx-copy me-2 align-middle fs-6 '
                style={{
                    cursor: 'pointer'
                }}></i>
        </Tooltip>
    </CopyToClipboard>
);
};

Answer 1

出现您面临的问题是因为每个 CopyID 组件都维护自己的

triggeredIndex

状态，该状态跟踪其工具提示是否应显示“已复制”或“复制”。

要解决此问题，您需要一种方法来全局跟踪所有 CopyID 组件中最后复制的 ID。

const ParentComponent = ({ dataList }) => {
  const [lastCopiedIndex, setLastCopiedIndex] = useState(null);

  const handleCopy = (index) => {
    setLastCopiedIndex(index);
  };
}

孩子

export const CopyID = ({ copyText, rowIndex, onCopy, isLastCopied }) => {}

状态应该这样处理。