父级 state 作为道具传递，在渲染时未更新。map function

Question

In the TableAndInfo Component, each row's parent element is rendered by the renderEls function and the content is returned by the renderSection function. This passes in the content in the sections property as a parameter, as well as the class of the parent container. Passing the props value of date, time, and current in the sections array results in a successful initial render, but they do not continue updating when the state changes. I have inspected the code with the React Developer Tools and I see that the state is being updated by the functions defined in the App function and other components. How do I ensure that the grandchildren elements are re-rendered when the state is updated? Sorry if this doesn't make sense, I was having trouble trying to explain the problem. Thanks in advance!

function App() {
    var [component, updateView] = useState('ServerFunctions');

    var updateDateAndTime = function(formatDate) {
        setInterval(function() {
            if (document.getElementsByClassName('date')[0] && document.getElementsByClassName('time')[0]) {
                updateDate(formatDate('date'));
                updateTime(formatDate('time'));
            }
        }, 1000);
    };

    useEffect(() => {
        updateDateAndTime(formatDate);
    });

    var [date, updateDate] = useState(formatDate('date'));
    var [time, updateTime] = useState(formatDate('time'));

    switch(component) {
        case 'Welcome':
            return (<Welcome updateView={updateView} date={date} time={time} backspacePinpad={backspacePinpad} />);
        case 'ServerFunctions':
            return (<ServerFunctions updateView={updateView} date={date} time={time} />);
        default:
            return null;
    }
}

class TablesAndInfo extends React.Component {
    sections = [[['info-row pct-space-b', 'flex between full-h'], {
        1: ['Menu', 'button', 'gray white-f clickable roundish quarter-w label clickable'],
        2: [this.props.current, 'div', 'f-override white-b small left three-quarter-w no-txt-overflow'],
    }], [['info-table full-h', 'flex full-h'], {
        1: ['Another Round', 'button', 'info-button blue white-f clickable'],
        2: ['Select All', 'button', 'info-button gray white-f clickable'],
        3: ['Name Check', 'button', 'info-button yellow clickable'],
    }], [['tables-section full-h', 'tables-section full-h white-b'], {
    }], [['new-table-b full-h', 'new-table-b med single round label full-h full-w'], {
        1: ['New Table', 'button', 'blue white-f med single clickable round label clickable full-h full-w']
    }]];

    renderEls(num, classes) {
        return (
            <div className={classes}>
                {this.sections[num].map((child, key) => {
                    if (typeof child === 'object' && !(child instanceof Array)) {
                        return (
                            <div className={this.sections[num][0][0]}>{this.renderSection(child, this.sections[num][0][1], key)}</div>
                        )
                    } else {
                        return null;
                    }
                })}
            </div>
        )
    }

    renderSection(obj, parentClass) {
        return (
            <div className={parentClass}>
                {Object.keys(obj).map((key, i) => {
                    if (obj[key][1] === 'button') {
                        return (
                            <button key={i} className={"flex center " + obj[key][2]}>{obj[key][0]}</button>
                        )
                    } else {
                        return (
                            <div key={i} className={"flex center " + obj[key][2]}>{obj[key][0]}</div>
                        )
                    }
                })}
            </div>
        )
    }

    render() {
        return (
            <div className="tables space-r">
                <div className="info tables-section">
                    {this.renderEls(0, 'info-table info-r')}
                    {this.renderEls(1, 'info-table info-b')}
                </div>
                {this.renderEls(2, 'table-view tables-section full-h pct-space-b')}
                {this.renderEls(3, 'new-table')}
            </div>
        )
    }

class ServerFunctions extends React.Component {
        return (
            <div className="App ServerFunctions">
                <Header signOff={this.signOff} renderBttnRow={this.renderBttnRow} />
                <div className="container order-control flex space-b">
                    <SelectedItems />
                    <TablesAndInfo current={this.state.current} date={this.props.date} time={this.props.time} />
                    <Functions current={this.state.current} />
                </div>
                <Footer current={this.state.current} renderBttnRow={this.renderBttnRow} />
            </div>
        )
    }
}

Answer 1

Ended up solving this: Here's what I added in the TablesAndInfo Component:

constructor(props) {
    super(props);
    this.state = {current: this.props.current, date: this.props.date, time: this.props.time}
}

shouldComponentUpdate(nextProps) {
    if ((nextProps.current !== this.state.current) || (nextProps.date !== this.state.date) || (nextProps.time !== this.state.time)) {
        this.setState({current: nextProps.current});
        this.setState({date: nextProps.date});
        this.setState({time: nextProps.time});
    }
    return true;
}

componentDidUpdate() {
    this.sections[0][1][2][0] = this.state.current;
    this.sections[0][2][1][0] = this.state.time;
    this.sections[0][2][2][0] = this.state.date;
}