反應道具不正確的值

我通過在React應用改變redux狀態處理404 error，所以如果有一個error，我更新state.error到404，我render取決於狀態的組件。這個display()函數在我的React容器裏面。反應道具不正確的值

display() { 
     const { weather: { weathers } } = this.props; 
     const error = this.props.weather.error; 
     console.log('props ', this.props); 
     console.log('props weather', this.props.weather, 'w err', this.props.weather.error); 
     console.log('error ', error); 

     if (error !== 0) { 
      return <ErrorMssg error={error} />; 
     } 

     if (weathers.length === 1) { 
      return <div>hai</div>; 
     } 

     return <Chart data={weathers}/>; 
    }

我控制檯日誌this.props並在mapStateToProps功能的終極版狀態，我可以成功地看到狀態更新，如果有一個404捕獲。我甚至可以看到，如果我在chrome控制檯中控制日誌this.props，並且展開它，我可以看到錯誤值，正如我所期望的（儘管對象擴展之前的值不是擴展後顯示的值，請參閱圖像），但如果我控制檯登錄this.props.weather.error它顯示我一個意想不到的價值。

這裏是鉻控制檯日誌：

這裏的減速

export default (state: I.StoreState = defaultState, action: T.AWeather): I.StoreState => { 
    const { type, payload } = action; 
    switch (type) { 
     case FETCH_WEATHER: 
      const _data = 'data'; 
      const data = payload[_data]; 
      const { name, country } = data.city; 

      const weathers: I.Weather[] = []; 
      for (let i = 0; i < data.list.length; i = i + 3) { 
       let item = data.list[i]; 
       let { dt_txt } = item; 
       let schedule = dt_txt ? dt_txt.split(' ') : ''; 
       let { humidity, pressure, temp } = item.main; 

       weathers.push({ 
        date: schedule[0], 
        time: schedule[1], 
        humidity, 
        pressure, 
        temp 
       }); 
      } 

      return { 
       city: { name, country }, 
       weathers, 
       error: 0 
      }; 

     case ERROR_NOT_FOUND: 
      defaultState.error = 404; 
      return defaultState; 

     default: 
      return state; 
    } 
};

這裏的代碼; S行動

export const fetchWeather = (searchValues: I.Search): T.AWeather | object => { 
    const { city, country } = searchValues; 

    const url: string = `${ROOT_URL}&q=${city},${country}`; 

    const response: T.AWeather | object = axios.get(url) 
     .then(res => ({ 
      type: FETCH_WEATHER, 
      payload: res 
     })) 
     .catch(error => ({ 
      type: ERROR_NOT_FOUND, 
      payload: error.response.status 
     })); 

    return response; 
};

的代碼編輯

注：我使用的是redux-form更新redux state當我點擊一個表單輸入，所以在我提交和error仍顯示爲0，但是當我點擊它的日誌，並呈現如預期的形式。

此外，當我在Chrome展開控制檯日誌它顯示它更新了state（即使它的日誌後，顯示Chrome的對象的重估像丹奧解釋）..應該不是容器重新渲染時state改變了？

來源

2017-12-18 LuisEgan

好吧，我找到了發生了什麼..問題是減速的，我用來做回：

case ERROR_NOT_FOUND: 
      defaultState.error = 404; 
      return defaultState;

其中

const defaultState: I.StoreState = { 
    city: {name: '', country: ''}, 
    weather: [{ 
     date: '', 
     time: 'string', 
     humidity: 0, 
     pressure: 0, 
     temp: 0 
    }], 
    error: 0 
};

而且我想，既然我沒有變異的狀態，只是返回一個新對象，它的工作，但它不，你必須這樣回來：

case ERROR_NOT_FOUND: 
      return { 
       city: defaultState.city, 
       weather: defaultState.weather, 
       error: 404 
      };

來源

2017-12-18 18:27:33 LuisEgan

當您向對象發送Chrome控制檯時，您會看到該對象中的一些字段以及一個三角形圖標，您可以單擊該圖標來展開對象並查看其完整內容。當您點擊該圖標時，Chrome會重新評估對象的內容。這些內容現在可能與登錄到控制檯時的內容不同，例如，如果狀態對象發生變化。

這裏查看更多的信息：Getting chrome console to show object values as they were。

所以這就是爲什麼你有一個this.state和console.log之間的不匹配。

但是，根據您的圖像，您在axios請求返回之前正在渲染您的組件。 error設置爲0（可能在defaultState？），所以console.log給你0，那麼axios在未來有一段時間會返回404。如果您想查看組件中呈現的更改，則需要進行另一次狀態更新或觸發重新呈現。

來源

2017-12-18 05:19:16

哦，我看到了，不知道關於Chrome控制檯，謝謝。在redux狀態下，我在axios響應時重新呈現，我使用redux-promise作爲中間件，所以當axios返回一個promise時，它不會更改狀態，但它會等待，直到axios返回一個對象來更改它，所以它應該使用更新後的道具重新渲染容器。 – LuisEgan

反應道具不正確的值

回答

相關問題