为什么在ReactJs

Question

我是ReactJs的新手，我陷入了这个问题，无法通过浏览找到任何解决方案。如果在其他地方已经回答了这个问题，请告诉我。 我的第一个问题是如何在React中更新同一页面上的组件。我认为它应该在状态发生变化时自动发生但在我的情况下，它并没有。 我尝试做的是onClick on div之后的API调用，并显示子列表而不是页面（组件）特定部分中的当前列表，此过程一直持续到父/子列表的末尾。但是当我单击div时，会更新Localstorage的值，成功调用API，除了在页面上显示结果外，所有内容都会转到正确的位置。刷新页面后，更新后的列表显示效果很好。 我想也许是因为我在Childlist组件中处理onclick但是当我将它移动到主组件时没有任何改变。

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

这是我的代码：

父组件：

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

Childlist组件：

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