Как обновить данные в компоненте без пострендеринга?

Question

[historydev]

Добрый день. Скажите пожалуйста как я могу из прототипа одного компонента, обновить информацию в другом без пострендеринга, у меня модуль поиска, я получаю данные с сервера в любом случае после ручного поиска пользователем, до этого я юзал innerHTML, как я могу это реализовать?

export default function GetContent() {

    return (
        <div className={'searchContent'} style={{minHeight: window.innerHeight/1.5}}>

            <div className="preloader">
                <div className="yellow">
                    <div className="red">
                        <div className="blue"/>
                    </div>
                </div>
            </div>

            <div className="resultsContainer">
                <div className="results">
                    {GetSearchBlock.prototype.data}
                </div>
            </div>

            <GetAdvertisingBar items={[
                (<GetInfoItem title={'Реклама'} desc={'Какой-то текст'} key={1}/>),
                (<GetInfoItem title={'Реклама'} desc={'Какой-то текст'} key={2} />)
            ]}/>

        </div>
    )

}

Спасибо.

Answer 1

[hzzzzl]

из прототипа одного компонента, обновить информацию в другом без пострендеринга

то есть прокидываешь новый проп, и компонент не перерендеривается?
посмотри shouldComponentUpdate(), там можно сравнить новые пропсы с this.props, и вернуть false если не надо рендерить заново
https://reactjs.org/docs/react-component.html#shou...

Comments

[hzzzzl]

но вроде не про это вопрос :D какой кусок в коде надо обновить?

{GetSearchBlock.prototype.data}
вот здесь получить стейт другого компонента, который вообще не связан с этим?
придется использовать какое-то хранилище типа Redux, или посылать пропсы наверх в далекого общего родители

[historydev]

hzzzzl, то есть, есть встроенный метод которым я могу обновить компонент как страницу в браузере?

[historydev]

hzzzzl, у меня компоненты-функции

[hzzzzl]

Владимир, мммм, реакт такого не подразумевает, всё должно рендериться движком "реактивно" в зависимости от данных

никто конечно не запрещает элементу div.results присвоить так называемый реф / ref / reference, и его переслать в другой компонент, там будет элемент DOM доступен через переменную типа this.resultsRef.current.innerHTML, но это только запутает логику (хоть возможно на первый взгляд и кажется что так проще, потому что "это как в браузере было")

есть встроенный метод которым я могу обновить компонент

shouldComponentUpdate() это метод жизненного цикла компонента, который наоборот позволит избежать ненужных обновлений для производительности

[historydev]

hzzzzl, так в этом и прикол, мне нужно обновить данные после того, как я получу их с сервера

[hzzzzl]

Владимир, я бы редакс заюзал, там как раз так всё и происходит ¯\_(ツ)_/¯
есть общее хранилище всего приложения, которое выгдядит например как
{ results: [] }
в GetContent слушаешь изменения хранилища, как только results меняется, то компонент сам перерендеривает как надо

<div className="results">
<ul>
  { this.props.result.map(result => <li>{result.text}</li> ) }
  { /* сначала пустой массив, когда придет ответ с сервера, то список сам наполнится */ }
</ul>
</div>

[historydev]

hzzzzl,

export default function GetSearchBlock({inputText, buttonText}) {

    let query = null;

    let allItems = null;

    const newPage = (items, page) => {
        GetContent.prototype.newPage(items, page, 9)
    };

    const setData = (elements) => {

        return elements.map((el, i) => (
            <div className="company-item" key={i}>
                <div className="company-item__title">{el.title}</div>
                <div className="company-item-status">{el.status}</div>
                <div className="company-item-info"><dl><dt>{el.info.name}</dt><dd>{el.info.body}</dd></dl></div>
                <address className="company-item__text">{el.address}</address>
                <div className="company-item-info"><dl><dt>{el.inn.name}</dt><dd>{el.inn.body}</dd></dl></div>
                <div className="company-item-info"><dl><dt>{el.ogrn.name}</dt><dd>{el.ogrn.body}</dd></dl></div>
                <div className="company-item-info"><dl><dt>{el.date.name}</dt><dd>{el.date.body}</dd></dl></div>
                <div className="company-item-info"><dl><dt>{el.bank.name}</dt><dd>{el.bank.body}</dd></dl></div>
                <div className="company-item-info"><dl><dt>{el.job.name}</dt><dd>{el.job.body}</dd></dl></div>
            </div>
        ))

    };

    const setQuery = async() => {

        query = {
            body: document.querySelector('.searchBlock input').value,
            type: document.querySelector('.searchBlock select').value
        };

        document.querySelector('.searchContent .preloader').style.display = 'flex';

        document.querySelector('.searchContent .preloader .yellow').style.animation = 'preloader 2s infinite';
        document.querySelector('.searchContent .preloader .red').style.animation = 'preloader 5s infinite';
        document.querySelector('.searchContent .preloader .blue').style.animation = 'preloader 3s infinite';

        GetSearchBlock.prototype.data = setData(await getData());

        console.log(GetSearchBlock.prototype.data);

        document.querySelector('.searchContent .preloader').style.display = 'none';

        // await newPage(allItems,2);

    };

    const getData = async() =>  {

        let res = await fetch('http://localhost:4000/scrap', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                query: query.body,
                type: query.type
            })
        });

        res = await res.json();

        return res.body

    };

    return (
        <div className={'searchBlock'}>
            <input type='search' placeholder={inputText}/>
            <select>
                <option value="ul">Юр. Лица</option>
                <option value="ip">ИП</option>
            </select>
            <button onClick={setQuery}>{buttonText}</button>
        </div>
    )

}

GetSearchBlock.prototype.data = null;

[historydev]

hzzzzl, я уже закрепил redux у себя, вчера хотел посмотреть, сегодня тоже хочу но уже сил нет, с ночи аххаха, думаю завтра точно посмотрю его, спасибо)

[hzzzzl]

Владимир, это уже не реакт, а какой-то хакинг яваскрипта получается :(
неужели реально доступен из GetContent GetSearchBlock.prototype.data, или все же undefined?