Wyszukiwarka na podstawie nazwy w renderowanych elementach - React

Odpowiedz Nowy wątek
2019-08-08 14:53

Rejestracja: 11 miesięcy temu

Ostatnio: 5 miesięcy temu

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

Rejestracja: 11 miesięcy temu

Ostatnio: 5 miesięcy temu

0

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

Pozostało 580 znaków

2019-08-08 17:09

Rejestracja: 6 lat temu

Ostatnio: 3 minuty temu

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

Rejestracja: 11 miesięcy temu

Ostatnio: 5 miesięcy temu

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

Rejestracja: 17 lat temu

Ostatnio: 3 tygodnie temu

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

Rejestracja: 11 miesięcy temu

Ostatnio: 5 miesięcy temu

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

Rejestracja: 17 lat temu

Ostatnio: 3 tygodnie temu

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

Rejestracja: 11 miesięcy temu

Ostatnio: 5 miesięcy temu

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

Rejestracja: 17 lat temu

Ostatnio: 3 tygodnie temu

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

Rejestracja: 11 miesięcy temu

Ostatnio: 5 miesięcy temu

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

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