状态更改时，React组件不会重新呈现 [英] React component not re-rendering when state changes

问题描述

我有一个基于URL的react组件，应导入一些数据，然后将其显示在另一个子组件中.当页面首次加载时，它会将初始数据加载为componentDidMount()中的组件状态.至于进一步的URL更改，它们在componentDidUpdate()中处理 导出默认类信息扩展了React.Component {

I have a react component that based on the url should import some data and then display it in another child component. When the page first loads it loads the initial data as the component state in componentDidMount(). As for further url changes, they are handled in componentDidUpdate() export default class Info extends React.Component{

constructor(props){
    super(props);
    this.state={
        element:null
    }
}

componentDidMount(){
    switch(this.props.match.params.id){
        case 'legende': import('../data/legends.json').then((data)=>{
            this.setState({
                element:(<InfoDisplay data={data.content} />)
            })
        });break;
        case 'istorie': import('../data/history.json').then((data) => {
            this.setState({
                element: (<InfoDisplay data={data.content} />)
            })
        }); break;
    }
}

componentDidUpdate(prevProps){
    if (this.props.match.params.id !== prevProps.match.params.id)
        switch (this.props.match.params.id) {
            case 'legende': import('../data/legends.json').then((data) => {
                this.setState({
                    element: (<InfoDisplay data={data.content} />)
                })
            });
            break;
            case 'istorie': import('../data/history.json').then((data) => {
                this.setState({
                    element: (<InfoDisplay data={data.content} />)
                })
            }); break;
        default: break;
        }
}

render(){
    return (
        <div style={{backgroundImage:`url(${background})`,height:'100vh',overflowX:'hidden',backgroundSize:'cover'}}>
            <Navbar/>
            {this.state.element}
        </div>
        )
    }
}

我的问题是，尽管switch语句中的状态已更新，但该组件不会重新呈现.我不知道我的方法有什么问题.有人可以帮我吗?谢谢！

My problem is that in spite of the state updating in the switch statement, the component won't re-render. I have no idea what's the problem with my approach. Can anyone help me out, please? Thanks!

这是用shouldComponentUpdate()而不是componentDidUpdate的代码:

import React from 'react'
import * as background from '../assets/img/background_main.png';
import Navbar from './Navbar'
import InfoDisplay from './InfoDisplay';

export default class Info extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            element: null
        }
    }

    componentDidMount() {
        switch (this.props.match.params.id) {
            case 'legende': import('../data/legends.json').then((data) => {
                this.setState({
                    element: (<InfoDisplay data={data.content} />)
                })
            }); break;
            case 'istorie': import('../data/history.json').then((data) => {
                this.setState({
                    element: (<InfoDisplay data={data.content} />)
                })
            }); break;
        }
    }

    shouldComponentUpdate(nextProps,nextState) {
        if (this.props.match.params.id !== nextProps.match.params.id && nextProps) {
            switch (nextProps.match.params.id) {
                case 'legende': import('../data/legends.json').then((data) => {
                    this.setState({
                        element: (<InfoDisplay data={data.content} />)
                    })
                }); return true;
                case 'istorie': import('../data/history.json').then((data) => {
                    this.setState({
                        element: (<InfoDisplay data={data.content} />)
                    })
                });return true;
                default: return false;
            }
        }

        return true;
    }

    render() {
        return (
            <div style={{ backgroundImage: `url(${background})`, height: '100vh', overflowX: 'hidden', backgroundSize: 'cover' }}>
                <Navbar />
                {this.state.element}
            </div>
        )
    }
}

推荐答案

您可能想使用shouldComponentUpdate代替，因为您想要做的是在 重新渲染组件之前进行操作.

You probably want to use shouldComponentUpdateinstead, as what you want is to do stuff before the component is re-rendered.

检查一下: https://code.likeagirl.io/understanding-react-component- life-cycle-49bf4b8674de

，并且: http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

这篇关于状态更改时，React组件不会重新呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！