Wyszukiwarka na podstawie nazwy w renderowanych elementach - React

Odpowiedz Nowy wątek
2019-08-08 14:53
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;
edytowany 2x, ostatnio: Ovonel265, 2019-08-08 16:34

Pozostało 580 znaków

2019-08-08 16:50
0

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

Pozostało 580 znaków

2019-08-08 17:09
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?


((0b10*0b11*(0b10**0b101-0b10)**0b10+0b110)**0b10+(100-1)**0b10+0x10-1).toString(0b10**0b101+0b100);

Pozostało 580 znaków

2019-08-08 17:55
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"
}
}
edytowany 1x, ostatnio: Ovonel265, 2019-08-08 17:56

Pozostało 580 znaków

2019-08-08 17:56
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());
edytowany 1x, ostatnio: kult, 2019-08-08 18:04

Pozostało 580 znaków

2019-08-08 18:57
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;

Pozostało 580 znaków

2019-08-08 19:16
0

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

Pozostało 580 znaków

2019-08-08 19:17
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"?

Pozostało 580 znaków

2019-08-08 19:21
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ć :(

edytowany 1x, ostatnio: kult, 2019-08-08 19:21

Pozostało 580 znaków

2019-08-08 19:26
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?

Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

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