gpt4 book ai didi

javascript - 访问并显示位于另一个组件中的模式

转载 作者:行者123 更新时间:2023-12-01 00:07:36 25 4
gpt4 key购买 nike

我有一个PersonList组件,无论用户点击List.Item我想传递一些详细信息,例如 personIdPersonModal并显示它。我正在使用 Ant Design 组件来实现模态。

以下是我尝试过的方法,但不幸的是我收到了如下错误:

Warning: Can't call setState on a component that is not yet mounted. This is a no-op, but it might indicate a bug in your application. Instead, assign to this.state directly or define a state = {}; class property with the desired state in the PersonModal component.

PersonModal.js

import React from "react";
import {Modal} from "antd";

class PersonModal extends React.Component {
constructor(props) {
super(props);
console.log(this.props.personId)
}

state = { visible: false };

showModal = () => {
this.setState({
visible: true,
});
};

// handleOk (...)
// handleCancel (...)

render() {
return <Modal
title="Basic Modal"
visible={this.state.visible}
onOk={this.handleOk}
onCancel={this.handleCancel}
>
Modal body
</Modal>
}
}
export default PersonModal;

PersonList.js

import React from "react";
import {Icon, Input, List, Avatar} from "antd";
import PersonModal from "PersonModal/PersonModal"

class PersonList extends React.Component {

showModal(personId) {
const modal = new PersonModal({personId: 123})
modal.showModal()
}

render() {
const persons = this.props.list;
return (
<div>
<List
itemLayout="horizontal"
dataSource={persons}
renderItem={item => (
<>
<List.Item onClick={this.showModal(123)} style={{cursor: 'pointer'}}>
<List.Item.Meta
avatar={<Avatar src="avatar.png"/>}
title={<span>{item.firstName} {item.lastName}</span>}
description={<span>{item.city}, {item.country}</span>}
/>
</List.Item>
</>
)}
/>
</div>
);
}
}

解决这个问题的正确方法是什么?由于我是 React 新手,我认为这不是正确的方法。

stackblitz here 上重现了问题

最佳答案

您需要跟踪 PersonList 组件中 PersonModal可见状态。您应该有一个 bool 变量来控制 PersonModal 的可见性。

并且PersonModal不会控制其可见性状态,而是从其客户端获取它,在您的情况下,客户端是PersonList。所以让我们从代码开始

首先,编辑 PersonModal 组件以期望来自其客户端的 props

class PersonModal extends React.Component {
// handleOk (...)
// handleCancel (...)

handleCancel = () => {

// because the client controls the visivlity state of the component
this.props.hideModal();
}

render() {
/// this.props.isVisible is required, and it will be a boolean true or false.
const shouldBeVisible = this.props.isVisible;

return <Modal
title="Basic Modal"
visible={shouldBeVisible}
onOk={this.handleOk}
onCancel={this.handleCancel}
>
Modal body
</Modal>
}
}
export default PersonModal;

所以现在你的 PersonModal 组件 expexts 一个 prop;这是 isVisible 属性。


class PersonList extends React.Component {

state = {
// the client controls the visibility of the modal with this state key;
showModal: false,
personId: null
}


// edited
showModal = (personId) => {
// set state to update the UI and show the PersonModal
this.setState({
showModal: true,
personId: personId
});
}

hideModal= () => this.setState({showModal: false});

render() {
const persons = this.props.list;
return (
<div>
// now PersonModal will only be visible when the parent of it tells it to
<PersonModal
isVisible = {this.state.showModal}
hideModal= {this.hideModal}
/>
<List
itemLayout="horizontal"
dataSource={persons}
renderItem={item => (
<>
<List.Item onClick={() => this.showModal(123)} style={{cursor: 'pointer'}}>
<List.Item.Meta
avatar={<Avatar src="avatar.png"/>}
title={<span>{item.firstName} {item.lastName}</span>}
description={<span>{item.city}, {item.country}</span>}
/>
</List.Item>
</>
)}
/>
</div>
);
}
}

希望对您有帮助;

这就是 React 世界中解决问题的方式

关于javascript - 访问并显示位于另一个组件中的模式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60270205/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com