javascript - react Prop 值不正确

Question

我正在通过更改 React 应用中的 redux 状态来处理 404 错误，因此如果出现错误，我将 state.error 更新为 404 并根据该状态渲染组件。这是我的 React 容器内的 display() 函数。

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 控制台中控制台记录 this.props，然后展开它，我可以看到我所期望的错误值(尽管对象扩展之前的值不是扩展后显示的值，请参阅图像)，但如果我控制台记录 this.props.weather.error 它会显示一个意外的值。

这是 chrome 控制台日志:

这是 reducer 的代码

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

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

请参阅此处了解更多信息:Getting chrome console to show object values as they were .

这就是为什么 this.state 和 console.log 之间不匹配的原因。

而且，根据您的图像，您正在 axios 请求返回之前渲染组件。 error 设置为 0(可能在 defaultState 中？)，因此 console.log 为您提供 0，然后 axios 在将来某个时间返回 404。如果您想查看组件中呈现的这些更改，则需要进行另一次状态更新或以其他方式触发重新呈现。