在我的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
不为空。
您对发生的事情有任何了解吗?
答案 0 :(得分:0)
您应该在抓取中添加“ .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)
});
}
答案 1 :(得分:0)
this.props.state.bus
-您尝试过吗?
我知道这已经有一年多了;但是,我是一个初学者,遇到这个问题时遇到了类似的问题(将状态从父组件传递到子组件)。就我而言,在子组件上,我必须使用this.props.state
,然后使用父级状态内的相关对象或元素。
主持人:请根据需要进行编辑或删除。