主页 / 问题 / 631360
Accepted
while1pass
Asked:2020-02-23 01:17:44 +0000 UTC2020-02-23 01:17:44 +0000 UTC

使用动态 url 进行路由时，componentDidMount() 不起作用

  • 772

componentDidMount()为什么当我尝试再次调用该组件时它可能无法在 React 容器中工作？

有一个链接列表，例如

<Link key={element.name} to={'elements/:element'}} />

我从链接中获取此元素的名称并将其传递给 props 中的 ElementDetail 容器（有条件地）

<ElementDetail name={:element} />

name从props我已经使用内部方法componentDidMount()：

@connect(
    state => ({ element: state.element }),
    dispatch => ({elementActions: bindActionCreators(elementActions, dispatch)})
)
export default class ElementDetail extends React.Component {
    componentDidMount() {
        console.log('>>> CDM')

        let { getProperties } = this.props.elementActions;
        getProperties(this.props.name)
    }

    render() {
        let { properties, isLoading } = this.props.element;
        let propertyGroups = properties['properties'];

        console.log('>>> RENDER')

        return <div />

首次安装组件时，代码按预期工作。

但是，当我尝试通过 Link 使用不同的数据再次调用 c 组件时，我只会在浏览器和props.name. 只有 render() 中的代码有效，我可以从控制台输出中看到这一点。我在哪里犯了错误？

reactjs

2 个回答

  1. Best Answer

    没有完整的代码不好说，但是很明显这个组件不是在第二次初始化，而是在更新。这可以签入componentWillReceiveProps()。如果第二次调用componentWillReceiveProps()而不是componentDidMount()，那么您需要使用componentWillReceiveProps()。

    事实是，当发送新props的时，组件不会重新初始化，而只会接收新的props。

    组件挂载后立即调用 componentDidMount()

    componentWillReceiveProps() 在挂载的组件接收新的 props 之前被调用

    • 3

  2. 找到了两个解决方案。

    首先，我向组件添加了一个键属性，键发生了变化（我从路由中获取），这导致重新挂载组件的反应

    let name = this.props.params.element;
...
<ElementDetail name={name} key={name} />

    每次更改键调用 ComponentDidMount()

    @connect(
    state => ({ element: state.element }),
    dispatch => ({elementActions: bindActionCreators(elementActions, dispatch)})
)
export default class ElementDetail extends React.Component {
    componentDidMount() {
        let { getProperties } = this.props.elementActions;
        getProperties(this.props.name)
    }
    
    ...

    其次是使用 componentWillReceiveProps() （感谢Nick的提示）

    let name = this.props.params.element;
...
<ElementDetail name={name} />

    在组件本身

    @connect(
    state => ({ element: state.element }),
    dispatch => ({elementActions: bindActionCreators(elementActions, dispatch)})
)
export default class ElementDetail extends React.Component {
    componentWillReceiveProps(nextProps) {
        if (nextProps.name !== this.props.name) {
            let { getProperties } = this.props.elementActions;
            getProperties(nextProps.name)
        }
    }

    componentDidMount() {
        let { getProperties } = this.props.elementActions;
        getProperties(this.props.name)
    }


...

    但是第二种方法有更多的代码并且是重复的。

    如果有人给出他们的解释和评论，那就太好了。

    • 2

相关问题