Question

我正在为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);
}

Answer 1

您看到不应该将jQuery与React一起使用的原因是，它们在两种根本不同的范例上运行。 jQuery直接操纵DOM，而React响应状态变化，然后根据需要操纵DOM。

应该更改您提交的代码，以便在诺言与数据一起返回时，您调用this.setState（假设您在组件类中）。该类将根据新状态重新呈现表。不要在render()函数内部调用promise，因为它是一个纯函数。相反，您可以使用生命周期方法（例如componentDidMount()）来调用promise。

我将查看状态和生命周期文档here。

使用承诺的数据更新React中的动态TD单元

1 个答案: