在 React 中处理自定义事件答案

【问题标题】：Handle Custom Event in React在 React 中处理自定义事件
【发布时间】：2021-03-07 23:29:47
【问题描述】：

我正在使用 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;

【问题讨论】：

我认为您缺少一些地方州来代表您的“真相来源”。 fetch 应该更新本地状态，当一个元素被删除时，它应该在本地以及后端被删除。或者，您可以在后端删除并重新触发数据提取，以确保您的 UI 具有最新数据。

标签： javascript reactjs react-router

【解决方案1】：

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

const contactDelete = (id)=>{ fetch('http://localhost:8000/contacts/' + id, { 方法：'删除' }).then(() => {

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

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

【讨论】：