MaterialTable动态查找

问题描述

我正在使用：

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"...}

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

如果我不使用'lookup'而只使用'title'和'field'，则这些列可以很好地显示我想要的数据。这是我的桌子：

<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>

解决方法

您必须确保对mobx存储的更新会触发反应更新。我怀疑您当前的代码无法执行此操作，或者执行错误。

您使用https://github.com/mobxjs/mobx-react吗？

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

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

或者您可以使用来包装您的课程

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