Question

在我的React应用程序中，我很难使用父组件的状态将父组件中的fetch调用返回的数据返回到子组件。

我相信我正在遵循标准的做法，但这没有用。

这是我父级组件的摘录。

class TasksView extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            bus: null
        }

        this.handleBusLinkClicked = this.handleBusLinkClicked.bind(this);
        this.getBusDetailView = this.getBusDetailView.bind(this);
    }

{*/ called when a button is clicked /*}
    getBusDetailView(bus_pk) {
        const response =
            fetch("/bus_detail_view/" + bus_pk + "/")
                .then(response => response.json())
                .then(data => {
                        this.setState({
                            bus: data.vehicle
                        })
                    }
                );
    }
        render() {
             return (
                <ChargerBusModal bus={this.state.bus}/>
        )
    }

这是我的孩子部分的摘录：

export class ChargerBusModal extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
            return (
                <Modal show={this.props.show} className={"fade fade-scale charger-detail-modal zoomIn"}
                       id={"bus-detail-modal"}
                       tabIndex={"-1"}>
                    <Modal.Header closeButton>
                        <Modal.Title id={"modal-title"}> Bus Details
                        </Modal.Title>
                    </Modal.Header>
                    <Modal.Body id={"modalBody"}>
                            <BusDetailContext.Provider value={{
                                bus: this.props.bus}}>
                                <Row className={"align-items-center"}>
                                    <Col>
                                        <BusModalInformation/>
                                    </Col>
                                </Row>
                            </BusDetailContext.Provider>

                    </Modal.Body>
                    <Modal.Footer>
                        <Button variant={"secondary"} dataDismiss={"modal"} onClick={this.props.onHide}>Close</Button>
                        <Button variant={"primary"}> Save Changes </Button>
                    </Modal.Footer>
                </Modal>
            )
        }
    }
}

问题在于，当调用getBusDetailView(bus_pk)并设置this.state.bus时，子组件中的this.props.bus始终为空。我希望它是父组件的this.state.bus的值，但事实并非如此。我确认data.vehicle不为空。

您对发生的事情有任何了解吗？

Answer 1

您应该在抓取中添加“ .catch”，确定请求正确响应了吗？

getBusDetailView(bus_pk) {
        const response =
            fetch("/bus_detail_view/" + bus_pk + "/")
                .then(response => response.json())
                .then(data => {
                        this.setState({
                            bus: data.vehicle
                        })
                    }
                ).catch(err => {
                   handleError(err)
               });
    }

Answer 2

this.props.state.bus-您尝试过吗？

我知道这已经有一年多了；但是，我是一个初学者，遇到这个问题时遇到了类似的问题（将状态从父组件传递到子组件）。就我而言，在子组件上，我必须使用this.props.state，然后使用父级状态内的相关对象或元素。

主持人：请根据需要进行编辑或删除。

在父组件中使用访存传递给子组件

2 个答案: