反应道具错误的价值

Question

我通过在error应用程序中更改redux状态来处理404 React，所以如果有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}/>;
    }

我在mapStateToProps函数中控制日志this.props和redux状态，如果有404捕获，我可以看到状态更新成功。我甚至可以看到，如果我在chrome控制台中控制log.props，我展开它，我可以看到错误值，正如我所期望的那样（尽管对象扩展前的值不是扩展后显示的值，请参阅图片），但如果我控制台登录this.props.weather.error它会显示一个意外的值。

这是chrome控制台日志：

这是减速器的代码

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

在这里;是行动的代码

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对象的重估，如Dan O所解释的）..当state被更改时，容器是否应该重新渲染？

Answer 1

当您将对象添加到Chrome控制台时，您会看到该对象中的一些字段以及一个三角形图标，您可以单击该图标以展开对象并查看其完整内容。单击该图标后，Chrome会重新评估对象的内容。这些内容现在可能与您登录到控制台时的内容不同，例如如果状态对象发生了变异。

有关更多信息，请参见此处：console.log。

这就是为什么Getting chrome console to show object values as they were和this.state之间存在不匹配的原因。

但是，根据您的图像，您在axios请求返回之前渲染组件。 console.log设置为0（可能在error？）所以console.log给你0，然后axios在将来的某个时间返回404。如果要查看组件中呈现的更改，则需要进行另一个状态更新或以其他方式触发重新呈现。

Answer 2

好的，我发现发生了什么..问题是我以前做的减速器的返回：

defaultState

哪里

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