Question

所以我在整个应用程序中都有这种情况的实例，但是我只是在React应用程序中实现了redux，并且应用程序的状态得到了适当的管理，但是我的React App不会重新呈现以反映更改

以下是我的一个React组件之一的示例：

import {connect} from "react-redux";
import {bindActionCreators} from "redux";
import store from "../store/store"
import {updateView} from "../store/actions/index"

function Device(props) {
        props.updateView(props.type, props.objects);
        var state = store.getState().objectView
        store.subscribe(()=>{
            state = store.getState().objectView;
        })
        console.log(state);
        var objcomponent = [];
        state.objects.forEach((obj)=>{
            objcomponent.push(<ObjectComponent info={obj.info} actions={obj.actions}/>)
        });

        return(
            <div className="device-container">
                <div contentEditable className="device-name">Device: {state.type}</div>
                {objcomponent}
           </div>
            )
    }



const mapDispatchToProps = dispatch =>{
    return bindActionCreators({
        updateView: updateView
    }, dispatch);
}

export default connect(null, mapDispatchToProps)(Device)

在这种情况下，应该重新渲染该组件以显示新设备。但是，相反，只有在数组大小大于上一次渲染时才显示新设备。这是部分重新渲染。它会显示这样的内容

//Previous Component
var component = [1, 2]

//Expected new Component
var component = [3, 4, 5]

//Actual new Component
var component = [1, 2, 5]

同时在Redux存储上，我可以看到所有应该发生的更改。

如果您认为这会有所帮助，这也是我的减速器和操作。我认为无论如何我都不会改变原始状态，但是如果您对Redux有更多的专业知识，请指出。我不过是一个新手而已。

操作：

import {UPDATE_VIEW} from "./objectviewactions"

export const updateView = (type,objects)=>{
    return {
        type: UPDATE_VIEW,
        payload: {type: type, objects: [...objects]}
    }
}

异径管：

import {UPDATE_VIEW} from "../actions/objectviewactions";
var initialState = {
    type: "",
    objects: []
}
export const reducer = (state = initialState, action)=>{
    switch(action.type){
        case UPDATE_VIEW:
            return {
                ...state,
                ...action.payload
            }
        default: 
            return state
        }
}

Answer 1

您的ObjectComponent实例似乎需要keys。当是父组件时，例如您的device-container div具有一个任意数量的子组件数组，键使React可以保持可重复使用的内容以及在渲染时需要替换的内容。

因此，您将像这样调用ObjectComponent：

<ObjectComponent key={obj.someUniqueIdentifier} info={obj.info} actions={obj.actions}/>

Answer 2

请请勿像这样直接在React组件内部访问Redux存储！这就是connect()应该为您处理的事情。

您应该提供一个mapStateToProps函数作为提取组件所需数据的第一个参数，并且该数据将作为道具传递到您的组件中。

视图未重新呈现，但我的Redux Store更新正确

2 个答案: