Question

我想让我的代码听取选择（在列表页面上），然后通过从另一个页面上的节点服务器获取数据来显示数据

import React from 'react'
import {Link} from 'react-router-dom'
import {connect} from 'react-redux'
import {loadBickes} from './../../reducers/itemsGet.js'
import axios from 'axios'
class Hello extends React.Component{


constructor(props){
    super(props)
    this.handleBick = this.handleBick.bind(this)
}

handleBick(){
    console.log("demanding bickes")
    //loadBickes();
    axios.get('/getBike')
        .then((response)=>{
        var dataP = response.data
        console.log("data set")
        console.log(response.data)
        console.log("redy to b dispatched set")
        {this.props.setState(response.data)}
    //    dispatch(setState(response.data))
    })
}
//                <h4><Link to="Bike" onClick={this.props.Bike}>Bicycle</Link></h4>

    render(){
        return(
            <div>
                <h1>Items</h1>

                <h4><button onClick={this.handleBick}>Bicycle</button></h4>
                <h4><Link to="Calculator" onClick={this.props.Calculator}>Calculator</Link></h4>
            </div>
        )
    }
}

const mapStateToProps =(state)=>{
    console.log("state"+state.item.name)
    return {
       user : state.item
    }
}

const mapDispatchToProps =(dispatch)=>{
 return {
    Bike : () => dispatch({
      type : "LOAD_BIKE"
    }),
     Calculator : () => dispatch({
      type : "LOAD_CALC"
    }),
        setState:(data)=>dispatch({
            type : "setData",
            payload : data
        })
  }
}

export default connect(mapStateToProps,mapDispatchToProps)(Hello)

我强行axios调用服务器，然后我想调度动作设置我的reducer的状态，然后我会尝试将其重定向到其他页面是他们的任何其他方式要么我需要1）向调度员提供axios的数据 2）在

之后重定向它的方法

请帮助

Answer 1

import React, { Component } from 'react'
import {Link} from 'react-router-dom'
import {connect} from 'react-redux'
import {loadBickes} from './../../reducers/itemsGet.js'
import axios from 'axios'

class Hello extends Component {

    constructor(props){
        super(props);
        this.handleBick = this.handleBick.bind(this)
    }

    handleBick(){
        axios.get('/getBike').then( (response) => {
            let dataP = response.data;
            this.props.setState(response.data);
            this.props.history.push("/route_you_want_to_go_too");
        });
    }

    render() {
        return(
            <div>
                <h1>Items</h1>

                <h4>
                    <button onClick={this.handleBick}>Bicycle</button>
                </h4>

                <h4>
                    <Link to="Calculator" onClick={this.props.Calculator}>Calculator</Link>
                </h4>
            </div>
        )
    }
}

const mapStateToProps = (state) => ({
        user : state.item
});

const mapDispatchToProps = (dispatch) => ({
        Bike : () => dispatch({
            type : "LOAD_BIKE"
        }),
        Calculator : () => dispatch({
            type : "LOAD_CALC"
        }),
        setState:(data)=>dispatch({
            type : "setData",
            payload : data
        })
});

export default connect( mapStateToProps,mapDispatchToProps )( Hello );

您应该考虑编写更清晰的代码，这样可以更轻松地帮助您。

了解redux中的mapDispatchToProps

1 个答案: