Reactjs React Redux搜索栏错误×&引用；TypeError:无法读取属性'；地图'；“未定义”的定义；_Reactjs_React Redux

Reactjs React Redux搜索栏错误×&引用；TypeError:无法读取属性'；地图'；“未定义”的定义；

reactjs

Reactjs React Redux搜索栏错误×&引用；TypeError:无法读取属性'；地图'；“未定义”的定义；,reactjs,react-redux,Reactjs,React Redux,我正在尝试用React和redux创建一个搜索栏。我将搜索栏放在一个组件（clientsearch.js）中，结果放在另一个组件（Clientdevicelocate.js）中我在“location.map”行上得到一个“TypeError:无法读取未定义”错误的属性“map”。似乎我没有通过初始状态“”。我是Redux的新手，这是我第一次尝试传递异步代码 clientdevicelocate.js import React, { Component } from 'react'; impor

我正在尝试用React和redux创建一个搜索栏。我将搜索栏放在一个组件（clientsearch.js）中，结果放在另一个组件（Clientdevicelocate.js）中

我在“location.map”行上得到一个“TypeError:无法读取未定义”错误的属性“map”。似乎我没有通过初始状态“”。我是Redux的新手，这是我第一次尝试传递异步代码

clientdevicelocate.js

import React, { Component } from 'react';
import { connect } from 'react-redux';

import './Clientdevicelocate.css';
import {Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowColumn,} from 'material-ui/Table';

class clientDevicelocate extends Component { 

    render () {
        let locations = this.props.location;  
    console.log('====================================');
    console.log('Locations', locations);
    console.log('====================================');
        return(
            <div>            
                <Table>
                    <TableHeader>
                        <TableRow>
                            <TableHeaderColumn>Device Alias</TableHeaderColumn>
                            <TableHeaderColumn>Device Serial Number </TableHeaderColumn>
                            <TableHeaderColumn>Device IMEI</TableHeaderColumn>
                            <TableHeaderColumn>Locate Address</TableHeaderColumn>
                            <TableHeaderColumn>Locate Date</TableHeaderColumn>
                            <TableHeaderColumn>Locate Time</TableHeaderColumn>
                        </TableRow>
                    </TableHeader>

                    <TableBody>
                    {locations.map(function(location, i){
                        return <TableRow key={location.numVehicleDeviceID}>
                            <TableRowColumn>{location.txtAlias}</TableRowColumn>
                            <TableRowColumn>{location.txtSMSDeviceSN}</TableRowColumn>
                            <TableRowColumn>{location.IMEI}</TableRowColumn>
                            <TableRowColumn>{location.fullAddress}</TableRowColumn>
                            <TableRowColumn>{location.date}</TableRowColumn>
                            <TableRowColumn>{location.time}</TableRowColumn>
                        </TableRow>
                    })}
                    </TableBody>
                </Table>
            </div>
        );
    }
}

const mapStateToProps = state => {
    return{
        loactions: state.locations
    };
}

export default connect(mapStateToProps)(clientDevicelocate);

import * as actionTypes from '../actions/actionTypes';

const intialState ={
        client: {
            numClientID:'',
            txtName:''
    }
};

const clientReducer = (state = intialState, action) => {
    switch(action.type){
        case actionTypes.SEARCH_CLIENT:
            return{
                ...state, 
                client:{
                    ...state.client,                       
                }
            };

        default:
            return state;
    }
}

export default clientReducer;

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';

import { setClient} from '../../store/actions/indexAction';

 class SearchBar extends Component {

  render() {
    const {fetchClient,value} = this.props;
    return (
      <input 
        className = 'form-control'
        placeholder = 'Search Client'
        onChange = {(e) => fetchClient(e.target.value)}
        value = {value} />
    );
  }
}

const mapStateToProps = state => {
  return {
    value: state.locations
  };

}

const mapDispatchToProps = dispatch => {
  return bindActionCreators({setClient}, dispatch);  
}

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

searchClientAction

我清除了API调用线路。API工作正常，在将代码移动到redux之前，我们已经在postman和clientdeviceloacte.js中直接使用了它

import * as actionTypes from './actionTypes';
import axios from 'axios';


export const setClient = (value) => {
    return{
        type: actionTypes.SEARCH_CLIENT,
        client: value,

    }
};

export const fetchClientFailed = () => {
    return {
        type: actionTypes.FETCH_CLIENT_FAILED
    }
}

export const fetchClient = (value) => {
    return dispatch => {
        axios({
            method: 'post',
            url: 'http://.../.../getDeviceLocation',
            data:   {
                "numClientID" : value,
                "numContactID" : null,
                "ynActive" : true
                }
            })
        .then((response) => {
            console.log(response)
            let locations = response.data;
            for(let i=0; i<locations.length; i++){
                let location = locations[i];
                locations[i].fullAddress = location.txtAddress + ', '+ location.txtCity + ', ' + location.txtState + ' ' +location.txtZip;
                locations[i].date = location.dtDate.substring(0,10);
                locations[i].time = location.dtDate.substring(11, 19);
            }
            dispatch(setClient(locations));
            // this.setState({locations: locations});
            })
        .catch ( error => {
                dispatch(fetchClientFailed());
            });
        } 
    };

import*作为“/actionTypes”中的actionTypes；
从“axios”导入axios；
export const setClient=（值）=>{
返回{
类型：actionTypes.SEARCH\u客户端，
客户：价值，
}
};
导出常量fetchClientFailed=（）=>{
返回{
类型：actionTypes.FETCH\u客户端\u失败
}
}
export const fetchClient=（值）=>{
返回调度=>{
axios({
方法：“post”，
网址：'http://.../.../getDeviceLocation',
数据：{
“numClientID”：值，
“numContactID”：空，
“ynActive”：正确
}
})
。然后（（响应）=>{
console.log（响应）
让位置=response.data；
for（设i=0；i{
分派（fetchClientFailed（））；
});
} 
};

Clientsearch.js

import React, { Component } from 'react';
import { connect } from 'react-redux';

import './Clientdevicelocate.css';
import {Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowColumn,} from 'material-ui/Table';

class clientDevicelocate extends Component { 

    render () {
        let locations = this.props.location;  
    console.log('====================================');
    console.log('Locations', locations);
    console.log('====================================');
        return(
            <div>            
                <Table>
                    <TableHeader>
                        <TableRow>
                            <TableHeaderColumn>Device Alias</TableHeaderColumn>
                            <TableHeaderColumn>Device Serial Number </TableHeaderColumn>
                            <TableHeaderColumn>Device IMEI</TableHeaderColumn>
                            <TableHeaderColumn>Locate Address</TableHeaderColumn>
                            <TableHeaderColumn>Locate Date</TableHeaderColumn>
                            <TableHeaderColumn>Locate Time</TableHeaderColumn>
                        </TableRow>
                    </TableHeader>

                    <TableBody>
                    {locations.map(function(location, i){
                        return <TableRow key={location.numVehicleDeviceID}>
                            <TableRowColumn>{location.txtAlias}</TableRowColumn>
                            <TableRowColumn>{location.txtSMSDeviceSN}</TableRowColumn>
                            <TableRowColumn>{location.IMEI}</TableRowColumn>
                            <TableRowColumn>{location.fullAddress}</TableRowColumn>
                            <TableRowColumn>{location.date}</TableRowColumn>
                            <TableRowColumn>{location.time}</TableRowColumn>
                        </TableRow>
                    })}
                    </TableBody>
                </Table>
            </div>
        );
    }
}

const mapStateToProps = state => {
    return{
        loactions: state.locations
    };
}

export default connect(mapStateToProps)(clientDevicelocate);

import * as actionTypes from '../actions/actionTypes';

const intialState ={
        client: {
            numClientID:'',
            txtName:''
    }
};

const clientReducer = (state = intialState, action) => {
    switch(action.type){
        case actionTypes.SEARCH_CLIENT:
            return{
                ...state, 
                client:{
                    ...state.client,                       
                }
            };

        default:
            return state;
    }
}

export default clientReducer;

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';

import { setClient} from '../../store/actions/indexAction';

 class SearchBar extends Component {

  render() {
    const {fetchClient,value} = this.props;
    return (
      <input 
        className = 'form-control'
        placeholder = 'Search Client'
        onChange = {(e) => fetchClient(e.target.value)}
        value = {value} />
    );
  }
}

const mapStateToProps = state => {
  return {
    value: state.locations
  };

}

const mapDispatchToProps = dispatch => {
  return bindActionCreators({setClient}, dispatch);  
}

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

import React，{Component}来自'React'；
从'react redux'导入{connect}；
从“redux”导入{bindActionCreators}；
从“../../store/actions/indexAction”导入{setClient}；
类搜索栏扩展组件{
render（）{
const{fetchClient，value}=this.props；
返回(
fetchClient（e.target.value）}
value={value}/>
);
}
}
常量mapStateToProps=状态=>{
返回{
值：state.locations
};
}
const mapDispatchToProps=调度=>{
返回bindActionCreators（{setClient}，dispatch）；
}
导出默认连接（mapStateToProps、mapDispatchToProps）（搜索栏）；

您可以尝试为clientDevicelocate组件中的位置构建空数组的初始状态

export default class clientDevicelocate extends Component{
  constructor(props){
    this.state = {
      locations:[],
    }
  }
}

您可以尝试为clientDevicelocate组件中的位置构建空数组的初始状态

export default class clientDevicelocate extends Component{
  constructor(props){
    this.state = {
      locations:[],
    }
  }
}

我需要在初始状态下传递clientReducer.js中的空数组。

添加后出现相同错误：构造函数（props）{super（）this.state={locations:[]，}}添加后出现相同错误：构造函数（props）{super（）this.state={locations:[]，}}