Redux返回的响应不会更新商店[关闭]

问题描述 投票:0回答:2

在我的React应用中,我正在使用Redux从NodeJS服务器中获取数据。

但是返回的响应不会更新商店!

请帮助我。

import React, { Component } from 'react'
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import Typography from '@material-ui/core/Typography';
import Paper from '@material-ui/core/Paper';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Search from '../custom/search';
//import jlist from './jlist.json';
import DeleteIcon from '@material-ui/icons/Delete';
import Edit from '@material-ui/icons/Edit';
import Fab from '@material-ui/core/Fab';
import Button from '@material-ui/core/Button';
import {connect} from 'react-redux';
import {getlists} from '../action/listaction'

var parent = null;

 class list extends Component {

    constructor(props) {
        super(props)
        console.log("abc",props.lists)
        parent = this;
        //  var jlist = props.list
        //  var lists=jlist.response.map((value, index) => {
        //     return value;
        // });

        this.state = {

            list:props.lists.state.list,
            filters: props.lists.state.list
        }

        this.handleSearchTextChange = this.handleSearchTextChange.bind(this);
    }

    componentDidMount(){
      this.props.fetchlist();
      console.log("componentDidMount",this.props)
    }

    handleSearchTextChange(filters) {
        this.setState({
            filters: filters
        });
    }

    handleSubmit(path,skill,client,date,name,mobile,email,location,experience,current,expected,notice,status1,status2){

    let { history } = parent.props;
    history.push({
      pathname: path,
      skill: skill,
      client:client,
      date:date,
      name:name,
      mobile:mobile,
      email:email,
      location:location,
      experience:experience,
      current:current,
      expected:expected,
      notice:notice,
      status1:status1,
      status2:status2
    });
}

    render() {
        return (

            <Card variant="outlined">
                <Paper>
                    <CardContent>
                        <Typography variant="h5" component="h2">
                            Job description
                  </Typography>
                    </CardContent>
                    <Card>

                        <Search placeholder="Search Client By Skills " onSearchClick={this.handleSearchTextChange} searchBy='skill' inputArray={this.state.list}></Search>
                        <br></br>
                    </Card>
                    <Paper >
                    <Button variant="contained" color="primary"  onClick={()=>this.props.history.push('/add') } style={{ float: " right" }}>ADD NEW </Button>
                     <br></br>
                        <Table >
                            <TableHead>
                                <TableRow>
                                    <TableCell>Skill</TableCell>
                                    <TableCell>Client </TableCell>
                                    <TableCell>Date</TableCell>
                                    <TableCell>Name</TableCell>
                                    <TableCell>Mobile</TableCell>
                                    <TableCell>E-mail</TableCell>
                                    <TableCell>Location</TableCell>
                                    <TableCell>Experience</TableCell>
                                    <TableCell>Current</TableCell>
                                    <TableCell>Expected</TableCell>
                                    <TableCell>Notice</TableCell>
                                    <TableCell>Status1</TableCell>
                                    <TableCell>Status2</TableCell>
                                    <TableCell> Action</TableCell>
                                </TableRow>
                            </TableHead>
                            <TableBody>

                                {
                                    this.state.filters.map((row, index) => {

                                        return (
                                            <TableRow key={row.id}>
                                                <TableCell className="tc" component="th" scope="row"> {row.skill} </TableCell>
                                                <TableCell className="tc" component="td" scope="row"> {row.client} </TableCell>
                                                <TableCell className="tc" component="th" scope="row"> {row.date} </TableCell>
                                                <TableCell className="tc" component="td" scope="row"> {row.name} </TableCell>
                                                <TableCell className="tc" component="td" scope="row"> {row.mobile} </TableCell>
                                                <TableCell className="tc" component="td" scope="row"> {row.email} </TableCell>
                                                <TableCell className="tc" component="td" scope="row"> {row.location} </TableCell>
                                                <TableCell className="tc" component="td" scope="row"> {row.experience} </TableCell>
                                                <TableCell className="tc" component="td" scope="row"> {row.current} </TableCell>
                                                <TableCell className="tc" component="td" scope="row"> {row.expected} </TableCell>
                                                <TableCell className="tc" component="td" scope="row"> {row.notice} </TableCell>
                                                <TableCell className="tc" component="td" scope="row"> {row.status1} </TableCell>
                                                <TableCell className="tc" component="td" scope="row"> {row.status2} </TableCell>

                                                <TableCell component="th" scope="row" align="center">
                                                    <div className="row">
                                                        <Fab color="secondary" size="small" aria-label="edit" >
                                                            <Edit 
                                                            onClick={()=>this.handleSubmit("/edit",row.skill,row.client,row.date,row.name,row.mobile,row.email,row.location,row.experience,row.current,row.expected,row.notice,row.status1,row.status2)}
                                                            />
                                                        </Fab>

                                                        <Fab aria-label="delete" size="small" >
                                                            <DeleteIcon  />
                                                        </Fab>
                                                    </div>
                                                </TableCell> 
                                            </TableRow>
                                        )
                                    }
                                    )
                                }
                            </TableBody>
                        </Table>
                    </Paper>
                </Paper>
            </Card>
        )
    }
}

const mapStateToProps=(state)=>{
    console.log("mapStateToProps",state.list)

    return{

        lists:state.list
    }
}

const mapDispatchToProps=(dispatch)=>{
    console.log("mapDispatchToProps")

    return{
        fetchlist :()=>{
            dispatch(getlists())
        }
      }
}

export default connect(mapStateToProps,mapDispatchToProps)(list)

action.js

//import {GET_LIST,ADD_LIST,EDIT_LIST,DELETE_LIST} from "./types";

export const getlists=()=>{

    return (dispatch)=>{

        fetch(' http://localhost:5000/')   
        .then(res=>res.json())
        .then(res2=>{
            console.log("getlists",res2)

            // this.setState({list:res2})
            dispatch({
                type:"GET_LIST",
                 payload:res2
            })
        })
    }
}

减速器

//import {GET_LIST,ADD_LIST,EDIT_LIST,DELETE_LIST} from "../action/types";

const initialState={
    list:[
        {skill:"ck",client:"info",date:"3-3-1999",name:"ppppppp",mobile:"83752932",email:"[email protected]",location:"kota",experience:"1 year",current:"5 lpa",expected:"10 lpa",notice:"immediate",status1:"running",status2:"running"},

    ]
}

export const list=(state=initialState,action) => {
    console.log("reducer",action.payload)

    switch(action.type){

      case "GET_LIST": 

          return{
              ...state,
              list:action.payload,  

          }
          default: 
          return {state}    
    }
}
javascript reactjs redux action store
2个回答
0
投票
URL中的“ localhost:5000”前有空格,将其删除

0
投票
将您的mapDispatchToProps更改为此:
© www.soinside.com 2019 - 2024. All rights reserved.