MaterialTable 动态查找答案

【问题标题】：MaterialTable Dynamic LookupMaterialTable 动态查找
【发布时间】：2020-12-18 15:40:15
【问题描述】：

我正在使用：

import MaterialTable from "material-table"

我正在尝试使可编辑表的“查找”成为动态的。当我编辑表格时，我希望有一个带有我的编辑选项的下拉菜单，而不是默认的空格。这是我的专栏：

let columns = [
    { title: "Country", field: "country", lookup: formatData(props.crmStore.countries)},
    { title: "Employee", field: "owner" , lookup: formatData(props.crmStore.owners) },
    { title: "Email Type", field: "email_type" , lookup: formatData(props.crmStore.emailTypes)},
]

我正在使用 mobx 存储我的数据和函数。 'formatData' 函数将我的数据排列为正确的格式：

{1: "Afghanistan",
2: "Albania",
3: "Algeria",
4: "American Samoa",
5: "Andorra",
6: "Angola",
7: "Anguilla",
8: "Antarctica",
9: "Antigua and Barbuda"...}

当表格加载时，列中的数据不显示，但是当我按下表格中的编辑按钮时，会出现一个带有我想要的值的选择下拉菜单。

如果我不使用“查找”并且只有“标题”和“字段”，则这些列可以很好地呈现我想要的数据。这是我的桌子：

<div className="client-table">
        <Grid>
            <MaterialTable
                title="User data from remote source"
                columns={columns}
                data={props.crmStore.clients}
                options={{
                }}
                icons={tableIcons}
                editable={{
                    onRowUpdate: (newData, oldData) => {
                    },
                    onRowDelete: (oldData) =>
                        new Promise((resolve) => {
                            props.crmStore.deleteClient(oldData, resolve)
                        }),
                }}
            />
    </Grid>
</div>

【问题讨论】：

你能分享一下你的数据是什么样子的吗？

标签： javascript reactjs material-ui mobx material-table

【解决方案1】：

您必须确保对 mobx 商店的更新触发响应更新。我怀疑您当前的代码没有执行此操作，或者执行不正确。

你在用https://github.com/mobxjs/mobx-react吗？

在这种情况下，您可以使用注释

@observer
class YourComponent extends ... {
    ....
}

或者你可以使用

来包装你的类

const YourWrappedComponent = observer(
    class YourComponent extends React.Component {
        ...
    }
)

【讨论】：