Wyszukiwarka na podstawie nazwy w renderowanych elementach - React

0

Wczorajszy problem w końcu rozwiązałem to standardowo pojawia się kolejny. Próbuję zaimplementować wyszukiwarkę, która będzie szukała na podstawie nazwy, z tablicy obiektów. Nic nie wpisane to wyświetla wszystko, coś wpisujemy to na bieżąco aktualizuje render, jak nic nie znajdzie to renderuje No results!. Dopiero się uczę i nie wiem czemu nie działa mi taka wyszukiwarka jak napisałem. Nie kompiluje nawet, bo nie rozumie event. Kombinowałem tam także, coś ze statem, ale za nic mi nie wychodziło. Pomożecie coś? ;)

class Container extends Component {

    state = {
        servers: [],
        activeMenu: [],
    };


    componentDidMount() {
        fetch('http://localhost:4454/servers')
            .then(response => response.json())
            .then(data => {
                this.setState ({
                    servers: data,
                    activeMenu: []
                })
            })
            .catch(error => console.log(error))
        

    }



    menuEnter = (serverId) => {
       this.setState({activeMenu: serverId});
    };

    menuExit = (serverId) => {
        this.setState({activeMenu: !serverId});
    };

    filterServers = (serverName) => {
        var updatedList = this.state.servers.name;
        updatedList = updatedList.filter(function (item) {
            return item.toLowerCase().search(event.target.value.toLowerCase()) !== -1;
        });
        this.setState({servers: updatedList})
};


    turnOn = () => {
        console.log('działa')
    };


    render() {

        return(
            <div className="prostok-t-1">
                <section className='grupa-1'>
                    <div className='title'>
                        <input onInput={this.filterServers} className='form' type="search" placeholder='Search'/>
                        <h2 className='servers'>Servers</h2>
                        <h3 className='number-of-elements-16'>Numbers of elements: 16</h3>
                    </div>
                    <div className='prostok-t-4'>
                        <div className='place'>
                            <div className="name">
                                <h3>Name</h3>
                            </div>
                            <div className="condition">
                                <h3>Status</h3>
                            </div>
                        </div>

                        <div>{this.state.servers.map((server) => {
                            if (server.name.length > 0) {
                                return (
                                    <div className="server" key={server.id}>
                                        <p className="area">{server.name}</p>
                                        <p className="status">{server.status}</p>
                                        <img onMouseOver={() => this.menuEnter(server.id)}
                                             onClick={() => this.menuExit(server.id)} className='menu' src={menu}
                                             alt="menu"/>
                                        <ul className={classNames({
                                            submenu: true,
                                            active: server.id === this.state.activeMenu
                                        })}>
                                            <li onClick={this.turnOn}>Turn on</li>
                                            <li>Turn off</li>
                                            <li>Reboot</li>
                                        </ul>
                                    </div>
                                )
                            }
                            return (
                                <p>No results!</p>
                            )
                            })}
                        </div>
                    </div>
                </section>
            </div>
        )
    }
}

export default Container;
0

Ktoś? Coś? Kompletnie nie mam pomysłu jak to rozwiązać...

0

var updatedList = this.state.servers.name;

Nie wiem, co dostajesz z serwera, ale po tym, że wywołujesz w innym miejscu .map na właściwości servers wnioskuję, że to tablica. Więc to .name wydaje się być niepotrzebne, albo coś ogólnie tu namieszałeś.

Poza tym czemu var a nie let czy const?

0
LukeJL napisał(a):

var updatedList = this.state.servers.name;

Nie wiem, co dostajesz z serwera, ale po tym, że wywołujesz w innym miejscu .map na właściwości servers wnioskuję, że to tablica. Więc to .name wydaje się być niepotrzebne, albo coś ogólnie tu namieszałeś.

Poza tym czemu var a nie let czy const?

Dostaję tablicę obiektów tego typu, ale nie odczytuje event z tej linijki. Nie wiem co tu jest źle.


```return item.toLowerCase().search(event.target.value.toLowerCase()) !== -1;



[
{
id: 1,
name: " US East (Virginia)",
status: "ONLINE"
},
{
id: 2,
name: " US East (Ohio)",
status: "ONLINE"
}
}
0

@Ovonel265: a search nie potrzebuje przypadkiem regexa? Spróbuj użyć indexOf. Albo includes, ale wtedy zwraca true gdy znajdzie"

return item.toLowerCase().includes(event.target.value.toLowerCase());
0

Rozwiązałem swoją zagwozdkę. Teraz wyszukuje, ale jak skasuje wpis to "nieodfiltrowuje". Zmieniałem this.setState({servers: filteredServers}), na filteredServers: filteredServers i kompletnie przestaje wyszukiwać. filteredServers, mam w state jako pustą tablicę, a w tej funkcji tam przypisuję, jakby przefiltrowane. Ktoś coś?

class Container extends Component {

state = {
    servers: [],
    activeMenu: [],
    filteredServers: []
};


componentDidMount() {
    fetch('http://localhost:4454/servers')
        .then(response => response.json())
        .then(data => {
            this.setState ({
                servers: data,
                activeMenu: [],
                filteredServers: []
            })
        })
        .catch(error => console.log(error))
}

menuEnter = (serverId) => {
   this.setState({activeMenu: serverId});
};

menuExit = (serverId) => {
    this.setState({activeMenu: !serverId});
};

filterServers = (event) => {
    const originalServersList = this.state.servers || [];
    const filteredServers = originalServersList.filter(item => item.name.toLowerCase().search(event.target.value.toLowerCase()) !== -1);
    this.setState({filteredServers: filteredServers})
};

turnOn = () => {
    console.log('działa')
};


render() {

    return(
        <div className="prostok-t-1">
            <section className='grupa-1'>
                <div className='title'>
                    <input onInput={this.filterServers} className='form' type="search" placeholder='Search'/>
                    <h2 className='servers'>Servers</h2>
                    <h3 className='number-of-elements-16'>Numbers of elements: 16</h3>
                </div>
                <div className='prostok-t-4'>
                    <div className='place'>
                        <div className="name">
                            <h3>Name</h3>
                        </div>
                        <div className="condition">
                            <h3>Status</h3>
                        </div>
                    </div>

                    <div>{this.state.servers.map((server) => {
                        if (server.name.length > 0) {
                            return (
                                <div className="server" key={server.id}>
                                    <p className="area">{server.name}</p>
                                    <p className="status">{server.status}</p>
                                    <img onMouseOver={() => this.menuEnter(server.id)}
                                         onClick={() => this.menuExit(server.id)} className='menu' src={menu}
                                         alt="menu"/>
                                    <ul className={classNames({
                                        submenu: true,
                                        active: server.id === this.state.activeMenu
                                    })}>
                                        <li onClick={this.turnOn}>Turn on</li>
                                        <li>Turn off</li>
                                        <li>Reboot</li>
                                    </ul>
                                </div>
                            )
                        }
                        return (
                            <p>No results!</p>
                        )
                        })}
                    </div>
                </div>
            </section>
        </div>
    )
}

}

export default Container;

0

Dziwne, że nie miałeś błędów skoro miałeś serverName a odwoływałeś się do event ;)

0
kult napisał(a):

Dziwne, że nie miałeś błędów skoro miałeś serverName a odwoływałeś się do event ;)

Chyba czas zainwestować w okulary ;p Jakieś pomysły na "odfiltrowanie"?

0

Masz wtyczkę debuggera w przeglądarce https://pl.reactjs.org/community/debugging-tools.html i używasz testów? https://jestjs.io
Mi nie chciałoby się tak męczyć i zgadywać :(

0
kult napisał(a):

Masz wtyczkę debuggera w przeglądarce https://pl.reactjs.org/community/debugging-tools.html i używasz testów? https://jestjs.io
Mi nie chciałoby się tak męczyć i zgadywać :(

Nie mam :) Jak to skończę to planuję usiąść coś popatrzeć na debbugery, testy, Hooki/Reduxy itp. Uczę się dopiero ;)
Jakieś pomysły czemu dla state servers działa, a dla state filteredServers nie?

1 użytkowników online, w tym zalogowanych: 0, gości: 1