了解状态和道具的变化与反应组件中的重新渲染答案

【问题标题】：Understanding state and props changes with rerendering in react components了解状态和道具的变化与反应组件中的重新渲染
【发布时间】：2017-10-10 23:10:55
【问题描述】：

我有一个组件没有像我预期的那样重新渲染。我不太关心这个具体的例子，而是更好地了解状态、道具、更新、重新渲染等在 react-redux 生命周期中是如何发生的。

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

这是来自delivery.js的相关sn-p，该组件使用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 不应该已经从传递它们的父组件更新了吗？为什么大多数组件似乎都是自己重新渲染的？

您可以提供的任何帮助或指向好的资源的链接，我将不胜感激。提前致谢！

【问题讨论】：

标签： reactjs redux react-redux

【解决方案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

【讨论】：