当状态改变时，React组件不会重新渲染

Question

我有一个基于url的react组件，它应该导入一些数据，然后在另一个子组件中显示。当页面首次加载时，它将初始数据作为组件状态加载到componentDidMount（）中。至于进一步的url更改，它们将在componentdiddupdate（）export default class Info（）中处理。组成部分{

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语句中有状态更新，但组件不会重新渲染。我不知道我的方法有什么问题。有人能帮我吗？谢谢

编辑：这是使用shouldComponentUpdate（）而不是componentdiddupdate的代码：

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>
        )
    }
}

Answer 1

如果重新呈现完成，将调用componentDidUpdate（）=

我不太确定一个州是否可以保存JSX内容。

或许可以这样尝试：

this.setState({
    element: data.content
})

==

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

希望您能通过这些信息找到您的bug

Answer 2

你真的可以简化它，让它更干净，这也应该解决你的问题：

在渲染中，请执行以下操作：

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

然后在componentDidMount和componentDidUpdate中，只需将状态数据设置为data。您请求的内容：

 case 'legende': import('../data/legends.json').then((data) => {
            this.setState({
                data: data.content,
            });
        });

显然，为了获得数据，您还需要更改构造函数：

this.state = {data: null};

希望这有帮助。

Answer 3

您可能想要使用应该组件更新来代替，因为您想要的是在组件重新渲染之前做一些事情。

看看这个：https://code.likeagirl.io/understanding-react-component-life-cycle-49bf4b8674de

这是：http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/