Question

我有一个不像我期望的那样重新渲染的组件。我不太关心这个具体的例子，而是更好地了解状态，道具，更新，重新渲染以及更多在react-redux生命周期中发生的事情。

我当前的代码是关于创建包含位置列表的交付。主要问题是重新排序位置的行程似乎不起作用 - 状态在reducer中正确更新，但组件没有重新渲染。

这是来自delivery.js的相关代码段，这是一个使用LocationSearch自定义组件显示位置列表中每个位置的组件：

{console.log("Rendering...")}
{console.log(delivery.locations)}
{delivery.locations.map((location, index) => (
    <div key={index}>
        <LocationSearch
            {...location}
            total={delivery.locations.length+1}
            index={index}
        />
    </div>
))}

console.logs在预期的时间和地点打印出正确的数据。当触发重新排序位置的操作（从LocationSearch内）时，控制台日志会打印出正确更新数据的位置列表。但是，组件未显示任何更新内容。

以下是LocationSearch组件的一些相关部分：

export class LocationSearch extends Component {
    constructor(props) {
        super(props)
        this.state = {
            searchText: this.props.address
        }
        this.handleUpdateInput = this.handleUpdateInput.bind(this)
    }

    handleUpdateInput (searchText) {
        this.setState({
            searchText: searchText
        })
        this.props.handleUpdateInput(searchText)
    }

    render(){
        const { type, itineraryOrder, floors, elevator, accessDistance, index} = this.props
        return (
            ...display all the stuff
        )
    }
}
...map dispatch, connect, etc...
function mapStateToProps(state, ownProps) {
    return {
        suggestions: state.delivery.suggestions,
        data: ownProps.data
    };
}

这是我感到困惑的地方 - 我想我的意思是按照componentWillUpdate的方式做一些事情，但是对于每一步发生的事情都找不到任何好的解释。我只是在那里设置this.props = nextProps吗？ this.props是否已经从传递它们的父组件更新了？为什么大多数组件似乎都会自己重新投降？

您可以给予任何帮助或链接到良好的资源我将不胜感激。提前谢谢！

Answer 1

在我发现redux之前，我一直遇到这类问题。考虑到你已经提到过使用react-redux，你应该做的就是切换到容器/组件结构而忘记componentWillUpdate（）

基本上，它允许的只是将新鲜的道具传递给呈现实际HTML的组件，因此您不必手动替换道具。

你的容器可能是这样的

import React from 'react'
import { connect } from 'react-redux'
import PresentationalComponent from 'components/PresentationalComponent'

const Container = props => <PresentationalComponent {...props} />

export default connect( state => ({
    searchText: state.UI.searchText,
    locations: [...],
}), dispatch => ({
    handleUpdateInput: e => dispatch( {
        type: "CHANGE_SEARCH_TEXT",
        text: e.target.value,
    } ),
}))(Container)

您的演示组件

import React from 'react'

const PresentationalComponent = ({ searchText, locations, handleUpdateInput }) => 
<div>
    {locations.map(location => <p>{location}</p>)}
    <input defaultValue={searchText} type="text" onChange={handleUpdateInput} />
</div>

export default PresentationalComponent

通过反应组件中的重新渲染来了解状态和道具更改

1 个答案: