Question

我有在状态（工作项）中保存的数据（对象）。我将它们映射到一张表，它可以正常工作。但是，当我尝试实现一个带有按钮的对话框时，用户可以看到有关该特定对象的更多信息，该对话框将打开，但显示来自另一个对象的错误信息。也就是说，由于某些原因，表格单元格信息（标题，描述等）与对话框中的标题和描述不同。

这有效：

                 {this.state.workitems.map((workitem) => {
                        return (

                            <tr className={this.showOrHide(workitem)}>


                                <td>


                                    <Text variant={"large"}>

                                        {workitem.company ? workitem.company + " - " : ""}

                                        <a href={workitem.url} target="_blank">{workitem.title}</a>
                                        <div className="description pt-2">
                                            <p>{workitem.status ? workitem.status : null}</p>


                                            </Dialog>
                                            <strong>Description: </strong>
                                            {workitem.description
                                                ? this.trimWord(workitem.description.replace("...", ""), 299, "...")
                                                : ""}{" "}
                                            ...

                                     </div>

                                    </Text>
                                </td>

但是，当我尝试添加对话框时，却没有如上所述：

{this.state.workitems.map((workitem) => {
                        return (

                            <tr className={this.showOrHide(workitem)}>


                                <td>


                                    <Text variant={"large"}>

                                        {workitem.company ? workitem.company + " - " : ""}

                                        <a href={workitem.url} target="_blank">{workitem.title}</a>
                                        <div className="description pt-2">
                                            <p>{workitem.status ? workitem.status : null}</p>
                                            <DefaultButton secondaryText="Open" onClick={this._showDialog} text="Open Dialog" key={workitem.description} />
                                            <Dialog
                                                hidden={this.state.hideDialog}
                                                title={workitem.title}
                                                subText={workitem.description}


                                            >

                                                <DialogFooter> <DefaultButton text="Close" onClick={() => (this.setState({ hideDialog: true }))} /></DialogFooter>

                                            </Dialog>
                                            <strong>Description: </strong>
                                            {workitem.description
                                                ? this.trimWord(workitem.description.replace("...", ""), 299, "...")
                                                : ""}{" "}
                                            ...

                                     </div>

                                    </Text>
                                </td>

对话框外部的映射属性为何与外部属性不同？

Answer 1

这里的问题可能是您正在workitems数组上映射并为每个项目渲染一个单独的对话框。但是，您正在控制所有对话框的显示，这些对话框仅在您的状态下带有一个hideDialog标志。当您只希望显示一个对话框时，这将导致显示每个对话框。

我认为这里的答案是将<Dialog/>组件移到map语句之外，而是将选定的项目在被选中时以您的状态存储，并作为道具传递给对话框。

很难给出完整的示例而没有看到整个组件（这是类还是功能组件？）。如果您发布了完整的代码，我可以尝试为您提供外观的基本概念。

地图功能内的对话框无法正常工作

1 个答案: