Почему сбрасывается ref на элемент?

Question

[Shurik]

Здравствуйте. Прошу вашей помощи, так как мыслей больше нет)
Итак, имеем некий компонент, в котором есть состояние:

conset [reExport, setReExport] = useState([reExportPattern])

где reExportPattern объект - структура данных
При рендере эту структуру я отрисовываю в интерфейсе в виде блоков элементов. Соответственно, если массив больше 1, то эти блоки будут повторяться.
Так же имею:

const modelFieldReExp = useRef([modelFieldReExpPattern])

где modelFieldReExpPattern шаблон описывающий reExport с рефами на него.

Метод добавления re:

function addReExportRawHandler() {
        let nextReExport = [...reExport];
        let newItem = reExportPattern();

        nextReExport.push(newItem);

        modelFieldReExp.current.push(modelFieldRegExpPattern);

        setReExport(nextReExp);
    }

тут все работает и рефы при добавлении блоков присутствуют. А вот при удалении:

function removeReExportRawHandler(e) {
        var reIdx = e.target.parentNode.parentNode.getAttribute('reidx');
        let nextReExport = [...reExport];

        if (reExport.length > 1) {
            modelFieldRegExp.current.pop()
            nextReExport.splice(reIdx, 1);
            setReExport(nextReExport);
        }
    }

рефы на reExport становятся null. Что это может быть? Наверное не понимаю что-то в жизненном цикле реката.

Кстати пробовал еще по обновлении reExport делать и useEffect и useLayoutEffect, чтобы менялся modelFieldRegExp. Т.е. re
reExport.forEach и для каждого элемента в modelFieldRegExp создаю соответственно свой элемент, но почему-то ругается при рендере на отсутствие необходимого modelFieldRegExp[inxex]

Comments

[WbICHA]

рефы на reExport становятся null

И где же эти рефы?

[Shurik]

WbICHA, прошу прощения - это риторический вопрос?

[WbICHA]

Shurik, забей, я не пропустил, что ты код решил словами описывать, а не кодом.
В любом случае это какие-то куски кода без какой-то внятной связи. Скидывай нормально всё, что относится к проблеме в том же виде, а то то, что в вопросе, не имеет логики.

[Shurik]

WbICHA, понял. Весь компонент не могу, слишком большой. Держите то, что имеет отношение к вопросу)

const reExportPattern = () => {
        let pattern = {
            kodfito: '',
            num: '',
            date: '',
            product: [{
                production: {
                    id: null,
                    value: ''
                },
                netto: '',
                unit: '',
                country: {
                    id: null,
                    value: ''
                }
            }]
        }

        return pattern;
    }

const [reExport, setReExport] = useState([reExportPattern()]);

const modelFieldRegExpPattern = {
        kodfito: {
            require: true,
            regexp: /^\d+$/,
            ref: useRef(null),
            checked: false
        },
        num: {
            require: true,
            regexp: /^[\w\/-]{4,}$/,
            ref: useRef(null),
            checked: false
        },
        date: {
            require: true,
            regexp: null,
            ref: useRef(null),
            checked: false
        },
        product: {
            production: {
                require: true,
                regexp: null,
                ref: useRef(null),
                checked: false
            },
            netto: {
                require: true,
                regexp: null,
                ref: useRef(null),
                checked: false
            },
            unit: {
                require: true,
                regexp: /^\d+$/,
                ref: useRef(null),
                checked: false
            },
            country: {
                require: true,
                regexp: null,
                ref: useRef(null),
                checked: false
            }
        }
    }

    const modelFieldRegExp = useRef([modelFieldRegExpPattern]);

function addReExportRawHandler() {
        let nextReExp = [...reExport];
        let newItem = reExportPattern();
        nextReExp.push(newItem);
        modelFieldRegExp.current.push(modelFieldRegExpPattern);
        setReExport(nextReExp);
    }

function removeReExportRawHandler(e) {
        var reIdx = e.target.parentNode.parentNode.getAttribute('reidx');
        let nextReExport = [...reExport];

        if (reExport.length > 1) {
            modelFieldRegExp.current.pop()
            nextReExport.splice(reIdx, 1);
            setReExport(nextReExport);
        }
    }

let rowsReExp = reExport.map((item, index) => {
            let first = <tr key={index * 10} reidx={index} pidx={0} className='align-middle'>
                <td rowSpan={reExport[index].product.length + 1}>
                    <div>
                        <Select
                            data={kodfito}
                            disabled={getKodfitoDisabled(index)}
                            name='kodfito'
                            value={reExport[index].kodfito}
                            handler={changeReExportHandler}
                            ref={modelFieldRegExp.current[index].kodfito.ref}
                        />
                    </div>
                    <div className='mt-1'>
                        <input type='text' className="form-control ms-1" name='num' value={reExport[index].num}
                               onChange={changeReExportHandler} ref={modelFieldRegExp.current[index].num.ref}/>
                    </div>
                </td>
                <td rowSpan={reExport[index].product.length + 1}>
                    <input
                        type='date'
                        name='date'
                        className='form-control'
                        value={reExport[index].date}
                        onChange={changeReExportHandler}
                        ref={modelFieldRegExp.current[index].date.ref}
                    />
                </td>
                <td>
                    <Autocomplete data={getProductionByField(index, 0, 're')} search={getProduction}
                                  pIdx={0} outerIdx={index} name='production' section="re" value={reExport[index].product[0].production.value}
                                  choiceHandler={choiceAutocomplete} ref={modelFieldRegExp.current[index].product.production.ref}/>
                </td>
                <td>
                    <input type='text' className="form-control" name='netto' value={reExport[index].product[0].netto}
                           onChange={changeReExportProductHandler} ref={modelFieldRegExp.current[index].product.netto.ref}/>
                </td>
                <td>
                    <Select
                        data={units}
                        name='unit'
                        value={reExport[index].product[0].unit}
                        handler={changeReExportProductHandler}
                        ref={modelFieldRegExp.current[index].product.unit.ref
                    }/>
                </td>
                <td>
                    <Autocomplete data={getCountryByField(index, 0, 're')} search={getCountry}
                                  pIdx={0} outerIdx={index} name='country' section='re' value={reExport[index].product[0].country.value}
                                  choiceHandler={choiceAutocomplete} ref={modelFieldRegExp.current[index].product.country.ref}/>
                </td>
                <td style={{width: 110}} className='small-text'><span className='link hover' onClick={createFssHandler}>создать ФСС</span></td>
                <td style={{width: 130}} className='small-text'><span className='link hover' onClick={addIntoFssHandler}>добавить в ФСС</span></td>
                <td style={{width: 30}}><span className='link hover' onClick={removeProductRowExpHandler}>x</span></td>
                <td rowSpan={reExport[index].product.length + 1} className='align-middle' style={{width: 30}}>
                    <span className='link hover' onClick={removeReExportRawHandler}>x</span>
                </td>
            </tr>;

            let middle = getReExpProductsRows(index);

            let end = <tr key={index * 10 + 9} idx={index}>
                <td colSpan='7' className='text-start position-relative'>
                    <span>Сумма: {sumProducts(reExport[index].product)}</span>
                    <span className="add-row" idx={index} onClick={addProductRowReExpHandler}>Добавить строку</span>
                </td>
            </tr>;

            let delimiter = (index !== reExport.length - 1) ?
                <tr key={index * 10 + 9.5}>
                    <td colSpan='10' className='delimiter'></td>
                </tr> : null;

        return [first, middle, end, delimiter]
        }
    )

return (
<div className='card bg-light shadow-sm p-2 m-2 mt-3'>
                <div className="row align-items-start">
                    <span className="col-sm-1 col-form-label">Описание товаров:</span>
                    <div className="col d-inline-flex">
                        <table className="table table-bordered mb-0">
                            <thead className='fs-6'>
                            <tr className='table-th'>
                                <th style={{width: 220}}>Реэкспорт ФСС</th>
                                <th style={{width: 150}}>Дата выдачи</th>
                                <th>Товар</th>
                                <th style={{width: 100}}>Нетто</th>
                                <th style={{width: 100}}>Единицы</th>
                                <th style={{width: 330}}>Страна происхождения (для 06 <br/>группы вводиить страну отправления)</th>
                                <th colSpan='2'>Действия с ФСС</th>
                                <th colSpan='2'>Удалить</th>
                            </tr>
                            </thead>
                            <tbody>
                            {rowsReExp}

                            <tr className='border border-0'>
                                <td colSpan='10' className='delimiter border border-0 pt-1 pb-0'><span className='hover link' onClick={addReExportRawHandler}>Добавить реэкспортный ФСС</span></td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
)

[WbICHA]

Shurik, откровенно говоря, к тебя написана какая-то хрень.)
У тебя в modelFieldRegExp находится один и тот же modelFieldRegExpPattern. Вернее он то новый каждый раз, ведь при ререндере новый создаётся, только все рефы-то одни и те же. В итоге у тебя в принципе все рефы ссылаются только на инпуты последнего элемента reExport.
Откровенно говоря, тут всё надо переписывать, и рефы по другому хранить. Как лучше не скажу, мне надо самому поэкспериментировать, но, как вариант, вынести объект в отдельную функцию создания объекта за пределы тела компонента и в рефах на компоненты использовать псевдо-рефы (объект { current: null }) или просто сетать реф через реф-калбек как душе угодно.

[Shurik]

WbICHA, спасибо большое за наводку! Я что-то и не подумал, что при создании нового reExport я передаю один и тот же объект:)
А как вам такое решение?

const [reExport, setReExport] = useState([structuredClone(reExportPattern)]);

function addReExportRawHandler() {
        let nextReExp = [...reExport];
        let newItem = structuredClone(reExportPattern);

        nextReExp.push(newItem);

        setReExport(nextReExp);
    }

так на первый взгляд все работает))
И если не сложно поясните про пвсевдо-рефы. Что то не слышал о таком. Это какой то костыль? Че то не пойму как обычный объект может ссылаться на элемент.
А на счет второго вашего предложения, попробовал для интереса создать колбэк реф упрощенно в виде

function setRef(el) {
reExport[item].num.ref = el
}

<input ref={setRef}>

и так выдает ошибку el undefinded. Что-то не так делаю?)

И да, скопируй свой ответ в отдельный ответ - помечу его как решение)

[WbICHA]

Shurik, мой коммент на ответ пока не тянет.)

const [reExport, setReExport] = useState([structuredClone(reExportPattern)]);

Ты делаешь глубокое копирование при каждом ререндере. И это не имеет смысла, пока ты создаёшь объект внутри тела компонента.
А работает это потому, что ты таким образом создал псевдо-рефы.

И если не сложно поясните про пвсевдо-рефы.

Я хз, может у них есть общепринятое название. Сам по себе реф — это объект с единственным пропом current, который мемоизируется. Можно написать так и работать будет так же:
const [someRef] = useState({ current: null });
И вот псевдо-рефом лично я называю тупо объект с той же структурой, то есть { current: 'anything' }.

и так выдает ошибку el undefinded. Что-то не так делаю?)

Ну, представленный код не может выдавать такую ошибку.)

[Shurik]

WbICHA,

Ты делаешь глубокое копирование при каждом ререндере. И это не имеет смысла, пока ты создаёшь объект внутри тела компонента.
А работает это потому, что ты таким образом создал псевдо-рефы.

не имеет смысла, потому что память например жрет или чему то мешает? Не пойму почему это плохо! Работает же))

[WbICHA]

Shurik, потому что тратит ресурсы на каждом ререндере для полного копирования объекта, причём синхронно. А это далеко не самая лёгкая операция.

[Shurik]

WbICHA, спасибо за советы)

[Shurik]

WbICHA, сработало ваше предложение о функции вне компонента.
Сделал функцию

function createRef() {
return {current: null}
}

и в паттерне reExport в свойствах пропов указывал createRef()
За это спасибо)
Но, если вам не сложно в двух словах поясните плиз как это работает в плане жизненного цикла Реакт и js в целом.
В моем понятии, когда идет рендер константа паттерна в ref свойствах своих элементов вызывает createRef() и получает на каждом из них новый объект {current: null}
Непонятно то, когда мы добавляем новую строку в reExport и делаем let newItem = reExportPattern. Мы же ссылаемся на тот же объект и по идее так же должны быть на каждом из элементов reExport одни и те же объекты! Не?)

[WbICHA]

Shurik, с чего вдруг на один и тот же, если при каждом вызове функции мы новый объект создаём?

[Shurik]

WbICHA, свойства шаблона будут иметь каждое свое. Но когда мы этот шаблон присваиваем элементам reExport, то в каждом из них они по идее должны повторяться. Т.е. при рендере в паттерне создаются уникальные, далее копируются ссылки в новых элементах reExport. Хотя повторюсь все работает как надо

[WbICHA]

Shurik, честно говоря, не очень понял о чём ты, но поверь, всё работает именно так, как и должно.)

[Shurik]

WbICHA, ))) ладно, спасибо еще раз)