为什么我不能在此Svelte应用程序的组件中保留与组件相关的动作？ 问题

问题描述

出于学习目的，我正在svelte中开发一个小型Users应用程序（对svelte来说是新手）。

在App.svelte中，我遍历了一组用户：

<script>
const apiURL = "https://randomuser.me/api/";
import { onMount } from "svelte";
import Search from './Search.svelte';
import User from './User.svelte';

let users = [];
let stringToMatch = "";

$:filteredUsers = users;

 onMount(() => {
    getUsers();
});

const getUsers = () => {
let getFrom = "&results=20&inc=name,location,email,cell,picture";
fetch(`${apiURL}?${getFrom}`)
    .then(res => res.json())
    .then((data) => users = data.results);
};

let filterUsers = () => {
    if (stringToMatch) {
        filteredUsers = users.filter(user => {
            return user.name.first.toLowerCase().includes(stringToMatch.toLowerCase()) ||
                user.name.last.toLowerCase().includes(stringToMatch.toLowerCase()) ||
                user.location.city.toLowerCase().includes(stringToMatch.toLowerCase());
        });
    } else filteredUsers = users;
};

</script>

<div class="container-fluid">
    <div class="card bg-light mb-2 overflow-hidden">
        <div class="card-header px-2 py-0 d-flex">
            <h6 class="text-dark m-0 align-self-center">Members Area</h6>
        </div>
            <div class="card-body bg-white p-0">
            <Search {filterUsers} bind:stringToMatch={stringToMatch} />
            {#if filteredUsers.length > 0}
                <table class="table users-table m-0">
                    <thead>
                        <tr>
                            <th class="text-right">#</th>
                            <th>Name</th>
                            <th>Lives in</th>
                            <th class="text-right">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {#each filteredUsers as user,index (user)}
                            <User {user} {index} on:Delete = {deleteUser(user)} />
                        {/each}
                    </tbody>
                </table>
            {:else}
                <p class="text-center text-muted my-3">No members found</p>
            {/if}
        </div>
    </div>
</div>

从上面的循环中可以看到，我显示了User.svelte组件中的每个用户。每个与用户相关的 action （例如删除用户）都在此组件中实时显示，这是合乎逻辑的。所以，我在这里：

const dispatch = createEventdispatcher();
const Delete = () => dispatch("deleteUser",user);

const deleteUser = (user) => {
    let itemIdx = filteredUsers.findindex(x => x == user);
    filteredUsers.splice(itemIdx,1);
    filteredUsers = filteredUsers;
}

但是，我收到此'deleteUser' is not defined错误，如 REPL 所示。

问题

• 我在做什么错了？
• 如何将deleteUser方法保留在User.svelte中并成功使用？

解决方法

您正在deleteUser组件中定义User，但是如果确实没有定义，则尝试在App中使用它。因此错误不是那个奇怪的imo。

您遇到的问题之一是您的delete函数作用于不属于组件（filteredUsers）的数组上，因此即使您直接在内部调用deleteUser该组件将导致另一个 undefined 错误。

我在这里看到的是，从逻辑上讲，您希望将与单个用户打交道的所有逻辑保留在User内，但是通过这样做，您将采用可以处理整个用户（数组）的逻辑，这是不一致的：作为数组的用户本身是App的一部分，为什么要从数组所属的地方提取与数组相关的逻辑？

在我看来，删除用户不是由自身项执行的功能，而是由数组所有者执行的功能。因此，根据您的情况，最好将deleteUser移至App。

如果您这样做，则User组件将负责

• 显示一个个人用户
• 可能编辑一个个人用户

该应用将负责

• 显示用户的列表
• 添加/删除所述列表
的用户