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

Я работаю над созданием динамического табличного представления данных в 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);
}
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
90
1

Ответы 1

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

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

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

Другие вопросы по теме