Question

我正在尝试根据道具刷新反应组件的状态。

我有这个文件，它是屏幕的主要子组件：

RoomsList.js

import React from 'react';
import { View, ActivityIndicator, StyleSheet } from 'react-native';
import {connect} from "react-redux";

import {getRooms} from "../../store/actions";
import RoomIcon from "../RoomIcon/RoomIcon";

class RoomList extends React.Component {
    componentDidMount() {
        this.props.onGetRooms();
    }

    renderRooms() {
        return this.props.rooms.map(room => {
            return (
                <RoomIcon key={room.id} room={room} />
            )
        });
    }

    render() {
        return (
            <View style={styles.container}>
                { this.props.rooms.length ? this.renderRooms() : <ActivityIndicator /> }
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        width: '100%',
        justifyContent: 'space-between',
        flexWrap: 'wrap',
    }
});

const mapStateToProps = state => {
    return {
        rooms: state.rooms.rooms
    }
};

const mapDispatchToProps = dispatch => {
    return {
        onGetRooms: () => dispatch(getRooms())
    }
};

export default connect(mapStateToProps, mapDispatchToProps)(RoomList);

Rooms Reducer

import { SET_ROOMS } from '../actions/actionTypes';

const initialState = {
    rooms: []
};

const roomsReducer = (state = initialState, action) => {
    switch (action.type) {
        case SET_ROOMS:
            return {
                ...state,
                rooms: action.rooms
            };
        default:
            return state;
    }
};

export default roomsReducer;

当状态在mapStateToProps函数中更新时，我可以确认它正在运行，因为我在其中放置了控制台日志以获取房间，并且该对象是更新的对象。

但是，尽管状态正在更新，但看起来渲染器实际上并没有更新。我试图做一个componentWillReceiveProps并分配状态，但是状态在这里从未真正更新过。

房间操作

import {SET_ROOMS} from './actionTypes';
import store from "../index";

export const getRooms = () => {
    return dispatch => {
        fetch("http://localhost/rooms").catch(err => {
            console.log(err)
        }).then(res => {
            res.json();
        }).then(parsedRes => {
            dispatch(setRooms(parsedRes));
        })
    }
};

export const addRoom = (roomName, roomDescription) => {
    const rooms = store.getState().rooms.rooms;

    const room = {
        room_name: roomName,
        room_description: roomDescription
    };

    return dispatch => {
        fetch("http://localhost/rooms", {
            method: 'POST',
            headers: {
               'Content-Type': 'application/json',
            },
            body: JSON.stringify(room)
        }).catch(err => {
            console.log(err)
        }).then(res => res.json())
        .then(parsedRes => {
            rooms.push(parsedRes);

            dispatch(setRooms(rooms));
        })
    }
};

export const setRooms = rooms => {
    return {
        type: SET_ROOMS,
        rooms: rooms
    }
};

初始化Redux Store

import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import reducers from './reducers';

const composeEnhancers = compose;

const store = createStore(reducers, composeEnhancers(applyMiddleware(thunk)));

export default store;

初始化Reducers

import {combineReducers} from "redux";
import lightsReducer from "./lights";
import roomsReducer from "./rooms";
import modalsReducer from "./modals";

export default combineReducers({
    lights: lightsReducer,
    rooms: roomsReducer,
    modals: modalsReducer
});

反应|组件未显示更新状态

0 个答案: