React native项目的实战1

这两天写的以一个页面是要求用户点击选项选择自己是否有亲属或曾经在此公司工作过，如果是的话就d出新的form来选择，新的信息包含一个add按钮，可以添加新的form，右上方有一个“x”按钮可以点击对应的form删除

下面是我在项目中遇到的一些困难

因为是添加一样的View，所以我选择用useState存一个空的数组，然后往里面添加的时候可以arr.map然后render我需要添加的内容，并且传入item,index  方便之后删除 *** 作

添加后发现在input中输入文字会影响其他的input，因为每个渲染出来的组件input的name都一样，所以使用了模板字符串给每个name添加了一个${index},View的key里面也传入的index，给了index下标以后我发现页面上点击删除以后每次都是删除最后一个form，我需要点击的那个form对应删除。原来是因为index导致的！数组中删除了对应位置的内容，但是index是删最后一个

如【0，1，3，4】删除了2，但是index是【0，1，2，3】，所以每次都是删最后一个，把View的key值换成item，${item-1}就好了

{arr.map((item: any, index: number) => {
                              return (
                                 
                                     {
                                          del(index);
                                       }}
                                    />
                                     (inputRef.current[1] = ele)}
                                       label={t(
                                          'declaration:form_relationship_name',
                                       )} // onSubmitEditing={() => //    inputRef.current[2]?.focus() // }
                                       blurOnSubmit={true}
                                       name={`relativesname${item-1}`}
                                    />
                                    
                                 
                              );
                           })}
                            {
                                 onPressButton();
                              }}
                              label={'Add'}
                           >
                        

这是添加删除的代码

我希望能在数组里面做到添加【1，2，3】所以const一个item往新的arr里面传入item+1，这里lastitem要|| 0，因为undefined+1为NaN，前面转Boolean为false就会变成0

删除需要深拷贝arr，不然影响了原数组会报错，用splice方法利用index删除

const onPressButton = () => {
      console.log(arr);
      if(arr.length<3){
         setArr(prev => {
            const lastItem = prev[prev.length - 1] || 0;
            const newArr = [...prev, lastItem + 1];
               console.log(lastItem);
               console.log(newArr);
               return newArr;
         });
      }
   };
   const del = (index: number) => {
      console.log(index);
      const cloneArr = JSON.parse(JSON.stringify(arr));
      cloneArr.splice(index,1);
      setArr(cloneArr);
      console.log(cloneArr);  
      
   };