在componentDidMount中调度redux动作导致无限循环

时间:2019-03-18 02:28:54

标签: reactjs redux react-redux axios

你好,我是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时,不会引起无限循环

componentWillUnmount中的console.log什么都没显示

有什么方法可以使请求正常工作,我仍然可以使用redux存储请求数据吗? (但不是无限循环)

0 个答案:

没有答案