Question

我正在尝试使用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);

clientReducer.js

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;

searchClientAction

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

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());
            });
        } 
    };

Clientsearch.js

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);

Answer 1

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

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

Answer 2

我需要在initialState中的clientReducer.js中传递一个空数组。

React-Redux搜索栏错误×“TypeError：无法读取未定义的属性'map'”

2 个答案: