"道具"更改时，下拉组件不会更改

Question

我显示的下拉菜单如下：

<DropdownMultiselect options={chartVariables} />

即使chartVariables是一个状态并且正确地得到更新，当chartVariables得到更新时，下拉菜单的选项也不会改变。

下拉列表的源代码可以在此处找到：https://github.com/kfrancikowski/react-multiselect-dropdown-bootstrap/blob/master/src/index.js

您能帮我找出chartVariables更改时选项不更改的原因吗我必须修复这个库吗；"力"；此DropdownMultiselect是否要重新渲染？

Answer 1

上面提到的这两种方法可以帮助您：-

• https://reactjs.org/docs/react-component.html#static-从道具获取导出状态
• https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#what-关于记忆

根据我的理解，简要描述：-

由于chartVariables在父组件中，并且作为prop传递给正在更新其状态options的DropdownMultiselect，因此子组件中的状态不会每次都更新，只要来自父组件的props的值发生变化，就需要强制更新。

我已经尝试使用第一种方法，它如预期的那样工作，

static getDerivedStateFromProps(props, state) {

if (props.options !== state.options) {
let optionsArray = [];
if (typeof props.options[0] === "object") {
props.options.map((value, index) => {
let key = value[props.optionKey];
let label = value[props.optionLabel];
optionsArray.push({ key: key, label: label });
});
} else if (typeof props.options[0] === "string") {
props.options.map((value) => {
optionsArray.push({ key: value, label: value });
});
}
return {
options: optionsArray
};
}
return null;
}

沙盒链接：-https://codesandbox.io/s/wizardly-rain-zbf7e?file=/src/DropdownMultiSelect.js