reactjs - 为什么在 ReactJs 中刷新页面后 UI 更新

Question

我是 ReactJs 的新手，我陷入了这个问题，无法通过浏览找到任何解决方案。请让我知道这是否已在其他地方得到回答。我的第一个问题是如何在 React 的同一页面上更新组件。我认为当状态改变时它应该自动发生，但在我的情况下，它不会。我想要做的是在 onClick on div 之后调用 API 并在页面的特定部分（组件）中显示子列表而不是当前列表，并且此过程一直持续到父/子列表的末尾。但是当我单击 div 时，Localstorage 的值被更新，API 成功调用，除了在页面上显示结果外，一切都到了正确的位置。一旦我刷新页面，更新的列表就会显示得很好。我想也许是'

另外，如果您有任何更好的编码技巧，我将不胜感激。

这是我的代码：

父组件：

export class MainP5 extends React.Component {
    constructor(props) {
        super(props);
        this.handleNextBtn = this.handleNextBtn.bind(this);
        this.handleBackBtn = this.handleBackBtn.bind(this);
        this.childItemHandler = this.childItemHandler.bind(this);
        this.state = {
            Items: '',
            doRedirect: false,
            doRedirectBack: false,
            doNothing: false
        };

    } 
    componentDidMount() {

        let selectedItemID = localStorage.getItem('SelectedTemplateID');
        let itemIdList = "[\"" + localStorage.getItem('SelectedSectionsChildID') + "\"]";

        request
            .post(conn.GetItems)
            .query({templateId: selectedItemID})
            .send(itemIdList)
            .set('Authorization', `Bearer ${localStorage.getItem("tokenId")}`)
            .set('Content-Type', 'application/json-patch+json')
            .set('accept', 'application/json')
            .set('dataType', 'jsonp')
            .end((err, res) => {
                this.setState({
                    Items: res != null ? res.text : ""
                });
            });
    }
    childItemHandler(selectedID) {
        alert(selectedID);
        this.setState({
            doNothing: true
        });

        localStorage.setItem('SelectedSectionsChildID', selectedID);

    }
    handleNextBtn(e) {
        this.setState({
            doRedirect: true
        });

    }

    handleBackBtn(e) {
        this.setState({
            doRedirectBack: true
        });

    }


    render() {

        let {doRedirect, doRedirectBack, Items} = this.state; 
        const FixedListFields = JSON.parse(("[" + (Items.substring(1, Items.length - 1)) + "]"));
        console.log("===> " + FixedListFields);
        if (doRedirect) {
            return (<Redirect to={`/assessment/page6?id_token=${localStorage.getItem("tokenId")}`}/>)
        } else if (doRedirectBack) {
            return (<Redirect to={`/assessment/page4?id_token=${localStorage.getItem("tokenId")}`}/>)
        } else {
            return (
                <div>

                    <Grid>
                        <Row style={{height: '100vh'}}>


                            {/*---------------------- Right Section --------------------------------*/}


                            <Col sm={8}>
                                {FixedListFields.map((item, i) => {
                                    return <div key={i}>
                                        <Row className="margin_h">
                                            <Col sm={12}>
                                                <h3 id="header1">{item.label}</h3>
                                            </Col>
                                        </Row>
                                        <Childlist childItemHandler={this.childItemHandler} key={item.childIds} childIds={item.childIds}/>
                                    </div>
                                })}
                            </Col>
                        </Row>
                    </Grid>
                </div>
            );
        }
    }
}

子列表组件：

class Childlist extends React.Component {
    constructor(props) {
        super(props);
        this.checkBoxHandler = this.checkBoxHandler.bind(this);
        this.childItemHandler = this.childItemHandler.bind(this);
        this.state = {
            ChildItems: '',
            selectedCheckboxes: true,
            selectedSectionIds: [],
            redirectToChildItemList: false,
        };

    }

    componentWillMount = () => {
        this.selectedCheckboxes = new Set();
    };

    componentDidMount() {
        let selectedItemID = localStorage.getItem('SelectedTemplateID');
        let itemIdList = (this.props.childIds + '').split(","); 

        request
            .post(conn.GetItems)
            .query({templateId: selectedItemID})
            .send(itemIdList)
            .set('Authorization', `Bearer ${localStorage.getItem("tokenId")}`)
            .set('Content-Type', 'application/json-patch+json')
            .set('accept', 'application/json')
            .end((err, res) => {
                this.setState({
                    ChildItems: res != null ? res.text : ""
                });
            });
    }



    childItemHandler(selectedID) {  
        localStorage.setItem('SelectedSectionsChildID', selectedID); 
    }

    render() {
        if (this.state.redirectToChildItemList) {
            return (<Redirect to={`./page5?id_token=${localStorage.getItem("tokenId")}`}/>)
        } else {

            let {ChildItems} = this.state;
            const FixedChildListFields = JSON.parse(("[" + (ChildItems.substring(1, ChildItems.length - 1)) + "]")); 
            const temp = this.state.selectedSectionIds + '';
            let tempArray = temp.split(","); 
            return FixedChildListFields.map((childItem, i) => { 
                      return <div>
                        <Row className="margin_m">
                            <Col sm={11}>
                                <div>
                                    <div  onClick={ () => this.props.childItemHandler(childItem.id) }
                                         className="list_block" key={i}>
                                        <span>{childItem.label} : </span>
                                        <span>{childItem.description} </span>
                                        {(childItem.childIds) ? (<img className=" align_vertical align_right"
                                                                      src={arrow}
                                                                      alt={'img'} width="40px" height="40px"/>) : ""
                                        }
                                    </div>
                                </div>
                            </Col>

                        </Row>
                    </div>
                }
            )
        }
    }
}