Question

我将spfx与react framework / pnp-js.t一起使用，我总共有8个下拉列表，我只想通过一个函数将数据从8个不同的共享点列表呈现到这些字段。

我曾尝试将这个东西实施为“城市”。但是在剩下的7个下拉列表中只能使用相同的功能。我知道我们可以在调用函数时动态传递listName，但是如何动态存储检索到的不同常数或数组的数据。

const locoptions: IDropdownOption[] = [
    { key: 'city', text: 'City', itemType: DropdownMenuItemType.Header }
];

<Dropdown  label="City" defaultSelectedKey="Pune" required={true}
 options={locoptions} styles={dropdownStyles} />


public componentWillMount()
{
    this.getDropdownData('Cities');

}

public getDropdownData(listName:string)
{
    sp.web.lists.getByTitle(listName).items.get().then((items: any[]) => 
    {

        for(let i=0;i<items.length;i++)
        {
            locoptions.push({
            key: items[i].Id,
            text: items[i].Title
        });
        }
    });

  }

Answer 1

如何动态存储检索到的不同常数或数组的数据。

您在这里：

const locoptions: {[key: string]: IDropdownOption[]} = {
    Cities: [
        { key: 'city', text: 'City', itemType: DropdownMenuItemType.Header }
    ]
};

...

locoptions[listName].push({
    key: items[i].Id,
    text: items[i].Title
});

更新

我真的会尽力帮助您。我没有看到您组件的所有代码，这就是为什么我会误解您的代码。另外，我无法为您创建一个有效的示例。

我希望您正在使用TypeScript。

如果要在获取下拉列表的新数据时重新渲染组件，则必须使用React组件的state：

//Interface for Component Props
interface IYourComponentProps {
    locoptions: {[key: string]: IDropdownOption[]}
}

//Interface for Component State
interface IYourComponentState {
    locoptions: {[key: string]: IDropdownOption[]}
}


//this is config for default options of your dropdowns
const defaultOptions: {[key: string]: IDropdownOption[]} = {
    Cities: [
        { key: 'city', text: 'City', itemType: DropdownMenuItemType.Header }
    ]
};



class YourComponent extends React.Component<IYourComponentProps, IYourComponentState> {
    public state = {
        locoptions: defaultOptions //set default options to state
    };

    public componentWillMount() {
        this.getDropdownData('Cities');
    }

    public getDropdownData(listName: string) {
        return sp.web.lists.getByTitle(listName).items.get().then((items: any[]) => {

            // process items to get array of options  
            const options = items.map((item) => {
                return {
                    key: item.Id,
                    text: item.Title
                };
            });

            // take defaultOptions as first options, if we don't have default options, then we get empty array
            const firstOptions = defaultOptions[listName] || [];

            // set new state
            this.setState({
                locoptions: {
                    ...this.state.locoptions,
                    [listName]: [
                        ...firstOptions,
                        ...options
                    ]
                }
            });
        });

    }

    public render() {
        return (
            <Dropdown  label="City" defaultSelectedKey="Pune" required={true} options={this.state.locoptions} styles={dropdownStyles} />
        )
    }
}

可重用的react组件可将数据动态绑定到多个列表中的多个下拉列表

1 个答案: