Question

我正在尝试为循环中的每个项目设置状态。到目前为止，我正在基于组件的道具创建数据对象。我正在向状态添加一个copied值。这是显示的示例代码：

const Example Page = ({
   tests = [], ...
}: Props) => {
    ...

  const copied = tests;
  copied.map((test) => {
    const data = {
      test: test.name,
      copied: false,
    };
    return { data };
  });

  const [copySuccess, setCopyStatus] = React.useState<TestsCopied>(copied);

  ....
 );
};

我觉得我的设置不正确。我希望能够为循环中的每个项目设置状态，但是我不确定处理该问题的最佳方法。

以下是此循环的实现方式：

return (
  ...

    <TestWrapper>
        {
            tests.map((test, index) => {
                let copyText = 'Copy code';

                const status = copySuccess[index];

                if (promoStatus && promoStatus.copied) {
                    copyText = 'Copied!';
                }

                return (
                    <Test key={index}>
                        <TestCopyBtn onClick={() => copyToClipboard(test.name, index)} textColor={copyColor}>
                            {copyText}
                        </TestCopyBtn>
                    </Promo>
                );
            })
        }
    </TestWrapper>

    ...
)

这是我要处理状态的函数：

const copyToClipboard = (copyID, index) => {
  const copyText = document.getElementById(copyID);

  if (copyText) {
    copyText.select();
    document.execCommand('copy');
    setCopyStatus((prevState) => {
      const data = prevState[index];
      data.copied = true;

      return { ...prevState, data };
    });
  }
}

Answer 1

copied.map将返回一个新数组。另外，如果您打算访问{ data }，我想不要返回data，而是想返回copyStatus[0].copied。返回{ data }意味着您将必须像copyStatus[0].data.copied一样进行访问。希望能有所帮助。这是代码：

const copied = tests.map((test) => {
  const data = {
    test: test.name,
    copied: false,
  };
  return data;
});

以下简洁版本也应适用。尽管如果无法理解，我建议您这样做：

const [copySuccess, setCopyStatus] = React.useState<TestsCopied>(tests.map(test => {
  return {
    test: test.name,
    copied: false,
  }
})

反应循环和设置状态

1 个答案: