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
})
})
}
}
reducer
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}
}
}
URL中的“ localhost：5000”前有空格，将其删除
将您的mapDispatchToProps更改为此：
const mapDispatchToProps = (dispatch) => {
return {
fetchlist: () => dispatch(getlists())
};
}
您应该在fetchlist的函数定义中返回dispatch(getlists())。以前，如果要使用它们，请在箭头功能中使用{}，然后应使用return关键字。
UPDATE
在化简器中，您只应返回默认情况下的状态...您不应该用{}包裹它，这将返回一个具有嵌套状态对象的新对象。因此，将return {state}更改为return state。
switch (action.type) {
case "GET_LIST":
return {
...state,
list: action.payload
};
default:
return state;
}