Question

解决

@jonahe帮助我意识到我在组件状态中存储陈旧数据导致redux和组件存储不匹配。

@ vs1682指出商店更新检查相对较浅，因此不应依赖于深层嵌套更改。

原始问题：

我在redux中使用基于promise的操作，并且遇到了以下问题：一旦我的状态更新（通过redux logger验证），可视组件就不会反映这一点。

行动流程：

提交表格（例如：生物财产变更）
智能组件会触发分派操作
操作按预期工作并触发reducer
状态更新（反映在控制台中的redux logger中）
界面不反映变化（但国家肯定会这样做）

按照上面的说法，我很自信我的行动和减速器都很好。我怀疑我在redux中忽略了一些东西＆gt;视觉流动。

以下是隔离代码。我带走了与之无关的jsx等。

将状态映射到智能组件的道具：

export default connect( store => ( { 
    user: store.user ? true : false,
    contacts: store.contacts
} ) )( ContactList )

智能组件

<Person person = { this.state.showingperson } />

人员道具通过：

showPerson( e ) {
    e.preventDefault( )
    const showingperson = this.props.contacts.object[e.target.id]
    this.setState( { ...this.state, showingperson: showingperson } )
}

愚蠢的组成部分：

export const Person = ( { person } ) => {
    return <div id="persontable" className="backdrop">
                <div className = 'modal col l6 m12 s12 center'>
                    <p>Bio: { person.bio }.</p>
                </div>
            </div>
}

修改：缩减代码：

从'时刻'导入时刻

const contactsReducer = ( state = { array: [], object: {} }, action ) => { 

    switch( action.type ) { 

        case 'UPDATE_FULFILLED':
        case 'GETALL_FULFILLED':
            // action.payload is an array of contacts resulting from a transformed firebase call
            return action.payload ? action.payload : state
        break

        case 'CLEAR_FULFILLED':
            return null
        break

        default:
            return state

     }

 }

 export default contactsReducer

Answer 1

Connect方法经过高度优化。浅将从mapStateToProps和mapDispatchToProps方法返回的组合对象与之前的结果进行比较。如果它们非常相等，则包装的组件将不会更新。

要检查是否是这种情况，您可以将componentWillReceiveProps方法添加到已包装的组件中，并检查是否正在使用此方法。

Answer 2

使用下方评论部分中的新信息进行修改：

var thisdate = new Date(date); thisdate.setHours(0,0,0,0); var day = 1; // monday var nth = 1; // first var first = new Date(thisdate.getFullYear(), thisdate.getMonth(), 1), add = (day - first.getDay() + 7) % 7 + (nth - 1) * 7; first.setDate(1 + add); nth = 3; // third var third = new Date(thisdate.getFullYear(), thisdate.getMonth(), 1), add = (day - third.getDay() + 7) % 7 + (nth - 1) * 7; third.setDate(1 + add); //console.log(thisdate + ', ' + first + ', ' + third); var result = (first.getTime() !== thisdate.getTime()) && (third.getTime() !== thisdate.getTime());或<UserList />组件是否未显示更新的数据？因为<Person />没有更新，因为它从内部状态的陈旧数据中获取数据是有意义的：

<Person />

因此内部状态将包含对旧对象的引用，直到再次执行// this is used to set the internal component state const showingperson = this.props.contacts.object[e.target.id] // but after an update of the Redux state, this still points to the // old (not updated) object in the internal state this.setState( { ...this.state, showingperson: showingperson } )函数。

旧的，错误的答案：

这通常是由于reducer中的状态发生突变，导致Redux无法识别应该重新呈现连接组件的更改。（因为vs1682提到的浅比较。）

所以在你的减速器中，确保你没有做这样的事情：

showPerson

但是有这样的东西

case UPDATE: {
  // mutation!
  state.contacts = action.payload;
  return state; 
}

React状态（redux）更新，接口没有

2 个答案: