Javascript 反应图不'；当状态更改时，无法重新渲染

你们能帮我吗，伙计们？ 我正在映射此

电子邮件

状态，但当我从

handleDelete

中的数组中删除电子邮件时，

映射

不会重新渲染。当I

console.log（电子邮件）

正确时，电子邮件被正确删除

import { TextField, Chip, Avatar } from "@material-ui/core";
import React, { useState } from "react";
import "./Email.css";


export default function Email() {
   const [value, setValue] = useState<string>();
   const [emails, setEmails] = useState<string[]>([]);
   
   function onTextChange(e: any) {
      setValue(e.target.value.replace(" ", ""));
      if (value?.includes(",")) {
         let separated = e.target.value.split(",");
         const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
         const newEmails = separated.filter((val: any) => re.test(val));

         if (newEmails[0] !== undefined) {
            emails.push(newEmails[0]);
            setEmails(emails);
            console.log(emails);
         }

         setValue("");
      }
   }

   function handleDelete(email: string) {
      const index = emails.indexOf(email);
      if (index > -1) {
         setEmails(emails.splice(index, 1));
         console.log(email, "removed");
         console.log('new list',  emails)
      }
   }

   return (
      <div>
         <TextField
            value={value || ""}
            variant='outlined'
            onChange={onTextChange}
            id='textInput'
            InputProps={{
               startAdornment: (
                  <div style={{ top: "50%" }}>
                     {emails.map((email: any) => (
                        <Chip
                           label={email}
                           key={email}
                           avatar={<Avatar>{email[0].toUpperCase()}</Avatar>}
                           onDelete={() => handleDelete(email)}
                           style={{ display: "-webkit-inline-box" }}
                        />
                     ))}
                  </div>
               ),
            }}
         />
      </div>
   );
}

从“@material ui/core”导入{TextField，Chip，Avatar}；
从“React”导入React，{useState}；
导入“/Email.css”；
导出默认函数Email（）{
const[value，setValue]=useState（）；
const[emails，setEmails]=useState（[]）；
函数onTextChange（e:any）{
setValue（例如target.value.replace（“，”）；
如果（值？.includes（“，”））{
让separated=e.target.value.split（“，”）；
常数re=/^（[^（）[\]\\，；：\s@“]+（\.[^（）[\]\，；：\s@“]+）*）（“+”）（\[[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.]）；（[a-zA Z-0-9]++]；
const newEmails=separated.filter（（val:any）=>re.test（val））；
如果（新电子邮件[0]！==未定义）{
emails.push（newEmails[0]）；
设置电子邮件（电子邮件）；
控制台日志（电子邮件）；
}
设置值（“”）；
}
}
函数handleDelete（电子邮件：字符串）{
const index=emails.indexOf（email）；
如果（索引>-1）{
设置电子邮件（emails.splice（索引，1））；
控制台日志（电子邮件，“删除”）；
console.log（'新列表'，电子邮件）
}
}
返回(
(
handleDelete（电子邮件）}
样式={{display:“-webkit内联框”}
/>
))}
),
}}
/>
);
}

问题在于这一行

设置电子邮件（emails.splice（index，1））拼接只是在适当的位置更改阵列，因此阵列的内存位置不会更改，因此react不会看到更改

你想要这样的吗
setEmail（preveemails=>preveemails.filter（e=>e！==email））
是的，我以前遇到过类似的问题。
首先，这是因为“emails”变量没有改变。我的意思是你调用emails.splice函数，但是email变量没有改变。
您应该创建新的数组变量，并将更改后的值设置为该变量。只有React state change侦听器才能理解“emails”值的变化，所以“我应该再次呈现函数…”

}
非常感谢您！解决了这个问题，比我的解决方案清晰多了！这是有道理的，但仍然没有以这种方式改变
function handleDelete(email: string) {
  const newEmails = [...emails];
  const index = newEmails.indexOf(email);
  if (index > -1) {
     setEmails(newEmails.splice(index, 1));
  }