Обновление динамической ячейки TD в React с обещанными данными - PullRequest
Новая
       26

Обновление динамической ячейки TD в React с обещанными данными

0 голосов
/ 13 декабря 2018

Я работаю над созданием динамического табличного представления для данных в React.В настоящее время я получаю данные обратно через обещание и пытаюсь обновить конкретный TD с помощью данных, возвращенных указанным обещанием.Однако попытка сделать это с помощью jQuery выдает ошибку «нераспознанное выражение».Я читал, что вы не должны использовать jQuery с React в любом случае, но я не могу понять, как правильно построить свое представление (я предполагаю, что должен создавать дочерний компонент, но я не уверен, какобновить его обещанными данными).Вот мой текущий код, который пытается это сделать.Спасибо за любую помощь! 

getThingField(thing, key) {
    const self = this;
    var user = gun;
    if(typeof(thing[key]) === 'object') { //Field requires a lookup of data
        var cellKey = thing._['#'] + self.props.linkedFields[key]
        cellKey = cellKey.replace(/\s/g, '');
        var jGet = '#' + cellKey;

        self.gunGetListProp(user, thing[key]['#'], self.props.linkedFields[key]).then(e=> {
            //this is my promise that returns my data in 'e'

            if(e.length == 1) {
                self.updateTD(jGet, e[0]);
            }
            else {
               //I expect an array of length 1 so I'm skipping this for now
            }
       });

       return <td key={cellKey}></td>; //To ensure the cell always renders
    }
    else { //This is for fields that don't require a lookup and works properly 
       return (
         <td key={thing._['#'] + key}>{thing[key]}</td>
       )
    }
}

updateTD(cellKey, val) {
   $(cellKey).html(val);
}

1 Ответ

0 голосов
/ 13 декабря 2018

Причина, по которой вы читаете, что вы не должны использовать jQuery с React, заключается в том, что они работают с двумя принципиально разными парадигмами.jQuery напрямую манипулирует DOM, а React реагирует на изменения состояния, а затем манипулирует DOM по мере необходимости.

Код, который вы отправили, должен быть изменен, чтобы при возвращении обещания с вашими данными вы вызывали this.setState(при условии, что вы находитесь в классе компонентов).Класс переопределяет таблицу на основе нового состояния.Обещание не должно вызываться внутри функции render(), потому что это чистая функция.Вместо этого вы можете вызвать обещание в методе жизненного цикла, например componentDidMount().

. Я бы просмотрел документацию о состоянии и жизненном цикле здесь .

...