反应道具不正确的值

  • Z时代
  • 2024-01-10
  • 分类：问答

我通过在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改变了？

回答：

好吧，我找到了发生了什么..问题是减速的，我用来做回：

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

回答：

当您向对象发送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。如果您想查看组件中呈现的更改，则需要进行另一次状态更新或触发重新呈现。

以上是 反应道具不正确的值 的全部内容， 来源链接： utcz.com/qa/260915.html

回到顶部