Question

请你帮我这个忙吗？我正在映射此emails状态，但是当我从handleDelete中的数组中删除电子邮件时，map不会重新呈现。当我console.log(emails)正确时，电子邮件将被正确删除。

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>
   );
}

Answer 1

问题是此行setEmails(emails.splice(index, 1));接合只是将数组更改到了适当的位置，因此该数组的内存位置不会更改，因此react不会看到更改。

您想要这样的东西 setEmail(prevEmails => prevEmails.filter(e => e !== email))

Answer 2

是的，我之前遇到过类似的问题。首先，这是因为“ emails”变量未更改。所以我的意思是您调用了emails.splice函数，但是email变量没有改变。您应该创建新的数组变量并将更改后的值设置到其中。只有该React状态更改侦听器才能理解更改的“电子邮件”值，因此“我应该再次呈现功能..”。

function handleDelete(email: string) {
  const newEmails = [...emails];
  const index = newEmails.indexOf(email);
  if (index > -1) {
     setEmails(newEmails.splice(index, 1));
  }

}

当状态改变时，React地图不会重新渲染

2 个答案: