Javascript 如何做一个；搜索功能“；在使用axios从Json调用信息时，是否会做出反应？

我对反应比较陌生，正在练习各种情景。我试图使用“Axios”在线调用json文件中的数据，然后使用搜索过滤掉这些名称

但我无法移动过去，除非保留组件。我确实在网上搜索了关于保留搜索过滤器的信息，但没有为我的场景找到一个简单/有用的过滤器。助人之手总是值得感激的

如果这是一个太简单的问题，我很抱歉

import React, { Component } from "react";
import axios from "axios";

class Activities extends Component {
    state = {
        users: []
    };

    async componentDidMount() {
        const { data: users } = await axios.get(
            "https://api.myjson.com/bins/1fj65g"
        );
        this.setState({ users });
    }
    render() {
        return (
            <div>
                <h3 style={{ textAlign: "center" }}> Activities</h3>
                <div>
                    {this.state.users.map(user => (
                        <ul key={user.id} class="list-group card card-1">
                            <li class="list-group-item">{user.sender.name}</li>
                        </ul>
                    ))}
                </div>
            </div>
        );
    }
}

export default Activities;

import React，{Component}来自“React”；
从“axios”导入axios；
类活动扩展组件{
状态={
用户：[]
};
异步组件didmount（）{
const{data:users}=wait axios.get(
"https://api.myjson.com/bins/1fj65g"
);
this.setState（{users}）；
}
render（）{
返回(
活动
{this.state.users.map（user=>(

{user.sender.name}

))}
);
}
}
出口违约行为；

这是我的在线json文件。我期待着寻找这些名字

3步

在JSX中添加文本输入节点，将其

onChange

事件绑定到类中的事件处理程序，并将

值

绑定到我们将设置的状态值：

<input type='text' onChange={this.searchChanged} value={this.state.search}/>

最后在阵列上使用，仅保留与筛选器对应的数据：

{this.state.users
    .filter(user => user.name.includes(this.state.search))
    .map(user => (
        <ul key={user.id} class="list-group card card-1">
            <li class="list-group-item">{user.sender.name}</li>
        </ul>
    )
)}

{this.state.users
.filter（user=>user.name.includes（this.state.search））
.map（用户=>(

{user.sender.name}

)
)}

3个步骤

在JSX中添加文本输入节点，将其

onChange

事件绑定到类中的事件处理程序，并将

值

绑定到我们将设置的状态值：

<input type='text' onChange={this.searchChanged} value={this.state.search}/>

最后在阵列上使用，仅保留与筛选器对应的数据：

{this.state.users
    .filter(user => user.name.includes(this.state.search))
    .map(user => (
        <ul key={user.id} class="list-group card card-1">
            <li class="list-group-item">{user.sender.name}</li>
        </ul>
    )
)}

{this.state.users
.filter（user=>user.name.includes（this.state.search））
.map（用户=>(

{user.sender.name}

)
)}

我没有看到任何尝试。你的搜索在哪里？我没有看到任何输入，也没有尝试根据输入过滤数据。我没有看到任何尝试。你的搜索在哪里？我没有看到任何输入，也没有尝试根据输入过滤数据。感谢您帮助Treycos！但是我在运行代码时遇到了一个问题，您可以澄清一下吗？它给出了一个错误“TypeError:无法读取未定义的属性”includes”`是因为它没有正确绑定吗？错误很明显，这是因为

user.name

未定义。将其更改为

user.receiver.name

或任何您想要过滤的值。我尝试过了。我使用了“user.sender.name”，然后出现了一个名为“TypeError:user.sender.name.includes（…）.map不是函数”的新错误，我在网上搜索解决方案哇，我刚刚注意到

includes

语句后缺少一个括号：

includes（this.state.search））

Treycos！谢谢。这真的很有帮助：）谢谢你帮助Treycos！但是我在运行代码时遇到了一个问题，您可以澄清一下吗？它给出了一个错误“TypeError:无法读取未定义的属性”includes”`是因为它没有正确绑定吗？错误很明显，这是因为

user.name

未定义。将其更改为

user.receiver.name

或任何您想要过滤的值。我尝试过了。我使用了“user.sender.name”，然后出现了一个名为“TypeError:user.sender.name.includes（…）.map不是函数”的新错误，我在网上搜索解决方案哇，我刚刚注意到

includes

语句后缺少一个括号：

includes（this.state.search））

Treycos！谢谢。这真的很有帮助：）