考虑以下代码,我需要通过道具将对象格式的ID传递给另一个组件。但是我已经尝试了很多时间,但还是没用。我想我可能有一些错误,但是我不确定它在哪里。
主页(已更新):
render(props){
const data = this.state.data;
return (
<div>
<Header />
<NavigationBar />
<PurchaseInfoView show={this.state.displayModal} closeModal={this.closeModal} value={this.openModal}/>
<div className="purchase-side">
<div className="side-title">
<h1>Purchase Order List</h1>
</div>
<hr class="solid" />
{
Object.keys(data).map((key) =>
<div className="list-item">
<h2 onClick= {() => this.openModal(data[key].id)}> //get id
{ data[key].item_name}
</h2>
</div>
)}
</div>
<div className="dads">
</div>
</div>
);
}
openModal(已更新):
openModal = (id) => {
this.setState(
{
displayModal: true,
id: id
});
console.log(id) // i can get the id from here id=1
};
PurchaseInfoView以获取ID(已更新)。
class PurchaseInfoView extends Component {
render() {
console.log(this.props.id) // get undefined
return (
<div className="Modal"
style={{
transform: this.props.show ,
opacity: this.props.show ? "1" : "0"
}}
>
<h3>Purchase Order detail</h3>
<p>Id: {this.props.id}</p> //cannot get it
</div>
);
}
}
export default PurchaseInfoView;
答案 0 :(得分:1)
如果要将对象传递给道具,请执行以下步骤:
在这里,您缺少第二步!
您应该尝试以下操作:
主页
render(props){
const { data, modalObject, displayModal } = this.state; //use destructuring is more readable
return (
<div>
<Header />
<NavigationBar />
<PurchaseInfoView show={displayModal} closeModal={this.closeModal} modalObject={modalObject}/> //pass the object from destructuring state as props
<div className="purchase-side">
<div className="side-title">
<h1>Purchase Order List</h1>
</div>
<hr class="solid" />
{
Object.keys(data).map((key) =>
<div className="list-item">
<h2 onClick= {() => this.openModal(data[key].id)}> //get id
{ data[key].item_name}
</h2>
</div>
)}
</div>
<div className="dads">
</div>
</div>
);
}
OpenModal
openModal = (id) => {
this.setState(
{
displayModal: true,
modalObject: {id: id, ...any others key/val pair}
});
};
PurchaseInfoView
class PurchaseInfoView extends Component {
render() {
const { modalObject} = this.props; //here get your object from props
console.log(modalObject.id);// here you have the object
return (
<div className="Modal"
style={{
transform: this.props.show ,
opacity: this.props.show ? "1" : "0"
}}
>
<h3>Purchase Order detail</h3>
<p>Id: {modalObject.id}</p>
</div>
);
}
}
如果您有任何问题要告诉我;)
注意:如果您在模态中需要的不仅仅是ID,我会用一个对象(又名{})来完成此操作。如果仅需要id,则只需用所需的“ id”替换modalObject
干杯!
编辑:要使该解决方案有效,您必须:
至少将您的状态初始化为此:
this.state = {modalObject:{id:``}}}
或在显示子元素之前在子组件中进行非null测试:
Id:{modalObject && modalObject.id? modalObject.id:''}
这些是必需的,因为在第一次渲染时,您的状态将具有您设置的初始状态,因此,如果您未设置任何内容或未测试值...那么...它是未定义的! :)
(请注意,如果id为null而不是出现未定义的错误,您的模态中将显示一个空格)
答案 1 :(得分:0)
猜猜你打错了。应该是{this.props.id}
render() {
console.log(this.props.id);
return (
<div className="Modal">
<h3>Purchase Order detail</h3>
<p>Id: {this.props.id}</p> //Changed line
</div>
);
}
在内部主页中,将ID传递给PurchaseInfoView并作为道具进行访问
<PurchaseInfoView show={this.state.displayModal} closeModal={this.closeModal} value={this.openModal} id={this.state.id}/>