状态更改时反应组件不重新渲染

Question

我有一个基于 url 的 react 组件应该导入一些数据，然后将其显示在另一个子组件中。当页面首次加载时，它会将初始数据加载为componentDidMount() 中的组件状态。至于进一步的 url 更改，它们在componentDidUpdate() 中处理 导出默认类 Info 扩展 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

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

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

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

Answer 2

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

在你的渲染中做：

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