Компонент React не обновляется и не отображается повторно

setState используется, но DataTables не обновляется после добавления или редактирования функции. Пожалуйста, сосредоточьтесь на:

  1. listOfCurrency
  2. Функция WS
  3. Функция onClickSubmitAddCurrency
  4. Компонент JSTable
  5. Tag в JSTable.js

Currency.js

   componentWillMount() {
    this.setState(
        {
            listOfCurrency: [],
            currency: { currency: '', symbol: '', status: '' },
            myCurrencyRate: { exchangeRate: 0, adminFee: 0 },
            currencyRateRequest:{exchangeRate:'',processFee:'',earnrate:'',earnAdminFee:''},
            myCurrency: { currency:''},
            isAdmin:false,
            message: '',
            snackbar: {
                open: false,
                vertical: null,
                horizontal: null,
            },

        }
    );

    var checkAccessRightUrl=properties.domain+properties.checkAccessRightUrl;
    this.wsCheckUrlAccess(checkAccessRightUrl,'Currency');

    var wsListUrl = properties.domain + properties.currencyList;
    this.ws(wsListUrl, false, false, 'get', null, false,'list');

    var populateMyMembershipCurrencyRate = properties.domain + properties.populateMembeshipCurrencyRate;
    this.wsbind(populateMyMembershipCurrencyRate,'currencyRate');

    var myMembershipCurrency = properties.domain + properties.showMyMembershipCurrency;
    this.wsbind(myMembershipCurrency,'myMembershipCurrency');

    var checkIsAdminUrl = properties.domain + properties.populateCheckIsAdmin;
    this.wsbind(checkIsAdminUrl,'checkIsAdmin');
}

ws(wsurl, jsonLibrary, toggle, process, senditem, snackbar,processName) {
    var accessToken = sessionStorage.getItem('accessToken');
    var reqs;
    if (process === 'post') {
        reqs = Request.post(wsurl)//wsurl
    } else if (process === 'get') {
        reqs = Request.get(wsurl)//wsurl
    }
    reqs.set('Authorization', 'Bearer ' + accessToken)
        .set('Content-Type', 'application/json')
    if (senditem != null) {
        reqs.send(senditem)
    }
    reqs.end((err, res) => {
        if (res.status === 200) {
            if (processName === 'currencyRate'){
                this.setState(
                    {
                        isLoading:false,
                        currencyRateRequest: res.body,
                        message: (res.body===null?'':res.body.message),
                        snackbar: {
                            vertical: 'top',
                            horizontal: 'right',
                            open: snackbar
                        },
                    }
                );
            }else{
                this.setState(
                    {
                        isLoading:false,
                        listOfCurrency: (jsonLibrary ? JSON.parse(JSON.stringify(res.body.responses)) : res.body),

                        message: (res.body===null?'':res.body.message),
                        snackbar: {
                            vertical: 'top',
                            horizontal: 'right',
                            open: snackbar
                        },
                    }
                );
            }

            if (toggle) {
                this.togglePrimary();
            }

        } else {
            this.checkSession(res);
            console.info('do logout function here');
            console.info(err);
        }
    });
}

onClickSubmitAddCurrency() {
    var wsListUrl = properties.domain + properties.addCurrency;
    this.ws(wsListUrl, true, true, 'post', this.state.currency, true);
};
   render() {
    return (
        <div className = "animated fadeIn">

            <CardBody>
                <JSTable id='#currencyTable' 
                        dataSet = {this.state.listOfCurrency} columns = {columns} 
                        onEdit = {this.onClickGotoEdit.bind(this)} onDelete = {this.onClickSubmitDeleteCurrency.bind(this)} />
            </CardBody>

        </div>
    );
}

JSTable.js

import React, { Component } from 'react';
import { Card, CardBody, CardHeader, Col, Row,Button } from 'reactstrap';
import '../../css/jquery.dataTables.css';
import '../../css/dataTables.responsive.css';

const $ = require('jquery');
var ReactDOM = require('react-dom');
$.Datatable = require('datatables.net-responsive');

class JSTable extends Component {

constructor(props) {
    super(props);
    this.state = {
        //ajaxurl    : props.ajaxurl,
        id      : props.id,
        dataSet : props.dataSet,
        columns : props.columns,
        onEdit  : props.onEdit,
        onDelete: props.onDelete,
        onTopUp : props.onTopUp,
        render  : {
            edit    :props.onEdit==null?{display:'none'}:{display:''},
            delete  :props.onDelete==null?{display:'none'}:{display:''},
            topup   :props.onTopUp==null?{display:'none'}:{display:''},
        },
        indicator:{
            edit    :props.onEdit==null?true:false,
            delete  :props.onDelete==null?true:false,
            topup   :props.onTopUp==null?true:false,
        }
    };
}


componentDidMount() {

    this.$el = $(this.el);
    this.$el.DataTable({
       // ajax: this.state.ajaxurl,
        data: this.state.dataSet,
        columns: this.state.columns,
        responsive: true,
        columnDefs: [{
            targets: 0,
            createdCell: (td, cellData, rowData, row, col) =>
                ReactDOM.render(
                    <div>
                        <Button color = "primary" style = {this.state.render.edit} 
                            onClick = {this.state.indicator.edit?this.empty:this.state.onEdit.bind(this.celldata,this,rowData,this.row,this.col)}
                             className = "mr-1">Edit</Button>

                        <Button color = "primary" style = {this.state.render.delete}
                            onClick = {this.state.indicator.delete?this.empty:this.state.onDelete.bind(this.celldata,this,rowData,this.row,this.col)}
                             className = "mr-1">Delete</Button>

                        <Button color = "primary" style = {this.state.render.topup}
                            onClick = {this.state.indicator.topup?this.empty:this.state.onTopUp.bind(this.celldata,this,rowData,this.row,this.col)} 
                            className = "mr-1">Top Up</Button>
                    </div>, td
                ),

            }
        ],

    });

}

// componentWillUnmount() {
//     this.$el.DataTable.destroy(true);
// }

empty(){
    console.info('===========no function=================');
}
render() {
    return (
        <div className = "animated fadeIn">
            <table data = {this.state.dataSet} className = "display" width = "100%" ref = {el => this.el = el}>

            </table>
        </div>
    );
}

}

export default JSTable;

Я могу получить данные обновления. Однако это не обновляет таблицу. Если только не обновлю страницу.

Пожалуйста, порекомендуйте.

Поведение ключевого слова "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) для оценки ваших знаний,...
1
0
3 014
2

Ответы 2

Самый простой способ обновить или повторно отрендерить компонент - это ключ. Ваш ключ может быть вашей ценностью в вашем штате

state = {counter:null}

Затем, когда данные загружаются из вашего API Используйте setState и увеличивайте свой счетчик

<table key = {this.state.counter}>
   //your code
</table>

Реагировать на текущее изображение в галерее изображений

Привет @Pio, Спасибо за ответ. Они (счетчик и ключ) добавляются только в Currency.js? Ничего общего с JSTable.js?

Keith 23.08.2018 02:37

@Keith я дал вам несколько руководств, которые не полностью решают вашу проблему :) "setState используется, но DataTables не обновляется после добавления или редактирования функции" 1 у вас есть некоторые данные 2 функция Add или eddit запускается 3 возьмите / перезагрузите data еще раз 4. Обновите компоненты с помощью ключа Итак, в JSTable.js добавьте эту логику в <table> </table>

Pio 23.08.2018 10:40

Вы можете использовать this.forceUpdate () для повторного рендеринга в reactJs.

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