小编Mic*_*cha的帖子

所以我在 vue 中有这个代码：

export default {
 name: 'Test',
  data() {
    return {
      test1: ['1', '2', '3'],
      test2: [{
        name: 'Hello'
      }, {
        name: 'Number two'
      }, {
        name: 'What ever'
      }], 
     };
  },
 created() {    
    const first = [...this.test1];
    first.forEach((elm, index) =>  first[index] = 'New');
    console.log('first: ', first);
    console.log('test1 in data', this.test1);

    const second = [...this.test2];
    second.forEach(elm => elm.name = 'New');
    console.log('second: ', second);
    console.log('test2 in data', this.test2);
  },
}

在设置数组“first”（应该是不引用数据“test1”数组的副本）的每个项目的值后，每个项目都等于“new”。this.test1 的值不会改变。

我对 test2 也做了同样的事情。复制并将每个项目的值更改为“新建”。但是现在数据数组'test2'的值在每个项目中也有'New'。

我不知道为什么会这样。有任何想法吗？

我们有一个带有翻译的 Formik 表格。初始值如下所示：

{
  // other stuff here like id, createdAt, etc.
  translations: [
   {
     languageCode: 'de',
     name: 'German',
   },
   {
     languageCode: 'fr',
     name: 'French',
   },
   {
     languageCode: 'it',
     name: 'Italian',
   }
  ]
}

selectedLanguage等于当前选择的语言 'de' | 'fr' | '它'。然后我们循环并availableLanguages为每个字段创建和输入字段，如下所示：

{
    languages.map((lang, ind) => (
        <div key={ind}>
            {selectedLanguage === lang && (
                <FormField>
                    <Input
                        name="Topic"
                        value={
                            values.translations?.find(
                                elm => elm.languageCode === lang
                            )?.name || ""
                        }
                        onChange={(v: React.ChangeEvent<HTMLInputElement>) => {
                            // Doesn't work
                            setFieldValue(
                                `${
                                    values.translations?.find(
                                        elm …