javascript - React map 不会随着状态的变化而重新渲染

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)); Splice 只是改变数组的位置，所以数组的内存位置不会改变，所以 react 看不到一个变化。

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