状态更改时，React组件不会重新呈现

Question

我有一个基于URL的react组件，应该导入一些数据，然后将其显示在另一个子组件中。 页面首次加载时，它将初始数据加载为componentDidMount()的组件状态。 至于进一步的网址更改，它们在componentDidUpdate()导出默认类信息扩展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语句中的状态已更新，但该组件不会重新呈现。 我不知道我的方法有什么问题。 有人可以帮我吗？ 谢谢！

编辑：这是应该使用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>
        )
    }
}

Answer 1

您可以真正简化并使其更加清洁，这也可以解决您的问题：

在渲染中执行：

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

然后，在您的componentDidMount和componentDidUpdate中，您要做的就是将请求中的状态数据设置为data.content：

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

显然，您还需要更改构造函数以拥有数据：

this.state = {data: null};

希望这可以帮助。

Answer 2

您可能想改用shouldComponentUpdate ，因为您要做的是在重新渲染组件之前先做一些事情。

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

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

Answer 3

如果重新渲染完成，则会调用componentDidUpdate（）=>实际上，就像您说的那样，因为您从不调用任何setState方法，所以没有重新渲染。

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

也许这样尝试：

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

==

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

希望您通过此信息找到您的错误

Answer 4

如果要在任何更新上重新渲染，则应使用

componentWillReceiveProps(nextProps){
  this.setState({element:nextProps.data})
}