Question

在我的redux动作中，我有一个很好的提取。我正在使用redux-thunk将它发送给我的减速机。然后我显然将我的组件连接到商店。在我的reactjs组件中，我能够看到json对象。让我们说结构是

object:{
    person: {
        name: {
            first: "first",
            last: "last"
    }
  }
}

当我试图获得像（person.name.first）这样的第一个名字时，它说“TypeError：无法读取未定义的属性”，但首先定义了。基本上任何三个项目的信息都会给我相同的信息。查看我的react组件时，问题出在console.log（）中。问题发生在我尝试访问对象的相同位置的组件内的任何位置，而不仅仅是在console.log（）中。

我的行动：

import { WEEKWEATHER,
    TODAYWEATHER,
    SEARCH,
    LOCATIONERROR
} from './types';

//autolocate on page load
 export const autoLocate = (location) => {  
 const url = 
 'http://api.wunderground.com/api/cc9e7fcca25e2ded/geolookup/q/' + 
 location + '.json'

 return (dispatch) => {

          fetch(url)
             .then((response) => response.json())
             .then(response => forcast(dispatch, response))
             .catch( (error) => { dispatch({ type:LOCATIONERROR }) })
};
};

//locate with search bar
 export const Locate = (location) => {  
 const url = 
 'http://api.wunderground.com/api/cc9e7fcca25e2ded/geolookup/q/' + 
 location + '.json'

 return (dispatch) => {
 dispatch({type: SEARCH,
          payload: location
          });


          fetch(url)
            .then((response) => response.json())
            .then(response => forcast(dispatch, response))
            .catch( (error) => { dispatch({ type:LOCATIONERROR }) })

};
};


//gathering forcast data from either auto or typed info
 const forcast = (dispatch, response) => {
 const location = response.location.zip
 const tenDayUrl = 
 'http://api.wunderground.com/api/cc9e7fcca25e2ded/forecast10day/q/' 
 + location + '.json'
    const todayUrl = 
 'http://api.wunderground.com/api/cc9e7fcca25e2ded/hourly/q/' + 
 location + '.json'

 fetch(todayUrl)
   .then((response) => response.json())
   .then(response => dispatch({
                               type: TODAYWEATHER,
                               payload: response.hourly_forecast[0]
                             }))
   .catch( (error) => { dispatch({ type:LOCATIONERROR }) })


   fetch(tenDayUrl)
     .then((response) => response.json())
     .then(response => dispatch({
                                 type: WEEKWEATHER,
                                 payload: 
 response.forecast.simpleforecast.forecastday[0]
                               }))
   .catch( (error) => { dispatch({ type:LOCATIONERROR }) })


 };

我的减速机：

import { TODAYWEATHER,  WEEKWEATHER, LOCATIONERROR, SEARCH } from 
'../Actions/types';

const INITIAL_STATE =  {
    week:[],
};
export default (state = INITIAL_STATE, action) => {
    switch (action.type){
        case WEEKWEATHER:
        return{ ...state, week:action.payload, loading:false }
                return state;
        }

    };

我的反应组件：

import React, { Component }     from 'react';
import { connect }              from 'react-redux';
import { Locate, autoLocate }   from '../Actions';
import {Card} from './Common'

class Weather extends Component{
    constructor(props){
        super(props);
        this.state={

         };
    }
    render() {
        const Loading = <Card>Loading...</Card>

        const Weather =  <div style={styles.PositionColumn}>
                            <div>tuesday</div>
                                <Card>
                                    <div style={styles.flexColumn}>
                                        <div style={styles.flexRow}>
                                            <div>jklsjdfkls</div>
                                            <div>2jlsfjle</div>
                                        </div>
                                        <div style={styles.flexRow}>
                                           <div>11</div>
                                            <div>22</div>
                                        </div>
                                    </div>
                                </Card>
                            </div>

        const displayWeather = (this.props.loading === true)? Loading 
: Weather;

        console.log(this.props.week.date.day)

        return(
           <div>
                <img style={styles.Background} src=
{this.state.background} alt=''/>


                    {displayWeather}

            </div>
        );
    }
}


const mapStateToProps = state => {
    const week = state.locate.week;


        return{ week };
}


export default connect(mapStateToProps, {Locate, autoLocate})(Weather)

Answer 1

当React组件挂载时，redux总是先发送defaultState。如果fetch在componentWillMount中，则无关紧要。这个调度不够快。您需要在reducer文件中修复初始状态，以使其与实际数据具有相同的模板。

const INITIAL_STATE =  {
   person: {
     name: {
       first: "",
       last: ""
     }
   }
};

Answer 2

您需要使用reducers初始化默认状态。

const INITIAL_STATE= {person : { name : {} }}

无法选择反应组件中对象中的项目

2 个答案: