导致“filterUsers 未定义"的原因此 Svelte 应用程序中的错误? [英] What causes the "filterUsers is not defined" error in this Svelte App?

问题描述

我正在开发一个小型 Svelte 应用程序，用于学习目的(我是 Svelte 的新手).

应用程序在 Bootstrap 4 表中显示来自 randomuser.me API 的用户 JSON.

我目前正在将应用程序集成到组件中.

在 App.svelte 我有:

搜索功能已移至其自己的组件中:

<div class="search p-2"><输入类=表单控件"类型=文本"placeholder="搜索...";绑定:值={stringToMatch}"；on:input="{filterUsers}">

即使我已经从 Search.svelte 导出变量并将 te search 组件导入到 App.svelte 组件中，我得到一个 filterUsers 未定义 错误，可以在 REPL 中看到.

为什么会这样?最快的解决方法是什么?

解决方案

Search 组件应该负责发出搜索词，或者您可以编写一个过滤函数并将其传递给 Search，但是您正在调用父级中的子函数.据我所知 export 在苗条中延迟.这意味着 Child 组件期望 prop 实际上不导出变量.您可以在此处阅读有关组件通信的更多信息:https://svelte.dev/docs#1_export_creates_a_component_prop.

我对您的 REPL 进行了一些更改.你可以在这里找到它.

https://svelte.dev/repl/9da70df5e25646aabc53bc5c37355b82c4a3?version=3.28.0

I am working on a small Svelte application, for learning purposes (Im new to Svelte).

The application displays a JSON of users from randomuser.me API in a Bootstrap 4 table.

I am currently working the application into components.

In App.svelte I have:

<script>
    const apiURL = "https://randomuser.me/api/";
    import { onMount } from "svelte";
    import { fade, fly } from 'svelte/transition';
    import { flip } from 'svelte/animate';
    import Search from './Search.svelte';
    let users = [];
    $:filteredUsers = users;
    
     onMount(() => {
        getUsers();
        filterUsers();
    });
    
    const getUsers = () => {
        let getFrom = "&results=20&inc=name,location,email,cell,picture";
        fetch(`${apiURL}?${getFrom}`)
            .then(res => res.json())
            .then((data) => users = data.results);
    };
    
    const deleteUser = (user) => {
        let itemIdx = filteredUsers.findIndex(x => x == user);
        filteredUsers.splice(itemIdx,1);
        filteredUsers = filteredUsers;
    }
</script>

The search feature was moved to its own component:

<script>
    export let stringToMatch = '';
    export let filteredUsers = [];
    
        export const filterUsers = () => {
        filteredUsers = users;
    
        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());
            });
        }
    }
</script>

<div class="search p-2">
   <input class="form-control" type="text" placeholder="Search..." bind:value="{stringToMatch}" on:input="{filterUsers}">
</div>

Even though I have exported the variables from Search.svelte and imported te search component into the App.svelte component, I get a filterUsers is not defined error, as can be seen in the REPL.

Why does that happen? What's the fastest fix?

解决方案

Search component should be responsible for emitting the search term or you can write a filtered function and pass it to Search, But you're calling child function in parent. As far I know export is defers in svelte. It means Child component expecting a prop not actually exporting the variables. you can read more about component communication here: https://svelte.dev/docs#1_export_creates_a_component_prop.

I have made some changes on your REPL. you can find it here.

https://svelte.dev/repl/9da70df5e25646aabc5c37355b82c4a3?version=3.28.0

这篇关于导致“filterUsers 未定义"的原因此 Svelte 应用程序中的错误?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！