在 React 中处理自定义事件

Question

我正在使用 react 来创建联系人列表。 我在home.js中获取数据，然后将数据作为道具发送到名为contactList.js的组件。 在contactList.js中，我有数据和一些按钮来执行编辑和删除等操作。

每当我单击删除时，它都会从服务器中删除数据，但 DOM 不会更新。 我想在删除某些内容时执行自定义事件来更新 DOM。

这是组件contactList.js ：

    import { Link } from 'react-router-dom';
    const ContactList = ({ contacts, title }) => {
    
        const contactDelete = (id)=>{
            fetch('http://localhost:8000/contacts/' + id, {
                method: 'DELETE'
            }).then(() => {
                console.log("deleted")
                // this.$emit('delete', id)
            }) 
        }
        return ( 
            <div className="container-fluid">
                <h4>{ title }</h4>
                <Link to={`/contact/create`} className="waves-effect waves-light btn right"><i className="material-icons left">add</i> New</Link>
                <table className="responsive-table">
                    <thead>
                        <tr>
                            <th>Index</th>
                            <th>Name</th>
                            <th>Email</th>
                            <th>Phone</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {contacts.map((contact, index) =>(
                        <tr key={index}>
                            <td>{ index + 1 }</td>
                            <td>{ contact.name }</td>
                            <td>{ contact.email }</td>
                            <td>{ contact.phone }</td>
                            <td>
                                <Link to={`/contact/details/${contact.id}`}><i className="material-icons green-text">visibility</i></Link>
                                <Link to={`/contact/edit/${contact.id}`}><i className="material-icons blue-text">edit</i></Link>
                                <span onClick={()=>contactDelete(contact.id)}><i className="material-icons red-text">delete</i></span>
                            </td>
                        </tr>
                        ))}
                    </tbody>
                </table>
            </div>
         );
    }
    export default ContactList;

这是home.js ：

    import useFetch from '../composables/useFetch';
    import ContactList from '../contacts/ContactList';
    
    const Home = () => {
        //State Hook
        const {data: contacts, isLoading, isError} = useFetch('http://localhost:8000/contacts'
        )
        const handleDelete = (id)=>{
            contacts.filter( contact => contact.id !== id )
        }
    
        return (  
            <div className="container">
                <div className ="card">
                    <div className ="card-content">
                        { isError && <div>{ isError }</div> }
                        { isLoading && <div>Loading...</div> }
                        { contacts && <ContactList contacts={ contacts } delete={handleDelete} title="Contact List"/>}
                    </div>
                </div>
            </div>
        );
    }
     
    export default Home;

Answer 1

你没有在服务器删除数据后调用 delete prop(handleDelete) 来更新客户端，我建议你将 prop 重命名为 handleDelete，因为 delete 是一个 javascript 关键字

const contactDelete = (id)=>{ fetch('http://localhost:8000/contacts/' + id, { method: 'DELETE' }).then(() => {

          //update on the client here
          delete(id) // change to hanldeDelete(id)

            console.log("deleted")
            // this.$emit('delete', id)
        })