Диспетчеризация избыточного действия в componentDidMount, вызывающего бесконечный цикл - PullRequest
Новая
       12

Диспетчеризация избыточного действия в componentDidMount, вызывающего бесконечный цикл

3 голосов
/ 18 марта 2019

Здравствуйте, я новичок в ReactJS. У меня есть код, который выглядит так 

import React, { Component } from 'react';
import axios from 'axios'
import { connect } from 'react-redux'
import {setFullView,setRecords} from '../actions/ActivityActions'

class BrowseAccount extends Component {
    constructor(props){
        super(props)
        this.state = {
            records:[]
        }
        this.handleClickRow = this.handleClickRow.bind(this)
    }
    componentDidMount(){
        console.log("infiniteloop")
        axios.post("http://localhost:8282/api/account/options", {
            search  : "",
            limit   : 10
        })
        .then(response => {
            var arr     = response.data.records
            var result  = arr.map( record => ({name : record.name,id: record.id}))

            this.props.setRecords(result)
        })
    }
    compoenentWillUnmount(){
        console.log(this.state.records)
    }

    handleClickRow(){
        this.props.setFullView("ViewAccount")
    }

    render() {
        return (
            <div>
                <table border="1">
                <tr><td>No.</td><td>ID</td><td>Name</td></tr>
                    {this.props.Activity.records.map((record,i)=><tr><td>{i+1}.</td><td>{record.id}</td><td><a onClick={()=>this.handleClickRow({i})}>{record.name}</a></td></tr>)}
                </table>
            </div>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        SelectReducer   :state.SelectReducer,
        BoxReducer      :state.BoxReducer,
        Global          :state.GlobalReducer,
        Activity        :state.ActivityReducer
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        setFullView : (path) => {
            dispatch(setFullView(path))
        },
        setRecords  : (data) => {
            dispatch(setRecords(data))
        }
    }
}

export default connect(mapStateToProps,mapDispatchToProps)(BrowseAccount)

почтовые запросы axios запускаются в бесконечном цикле

onClick в строке таблицы не работает

но когда я использую this.setState () вместо использования redux, это НЕ вызывает бесконечный цикл

console.log в componentWillUnmount ничего не показывает

есть ли способ заставить запрос работать нормально, и я все еще могу хранить данные запроса с использованием избыточного числа? (но не в бесконечном цикле)

...