下拉组件不会随道具更改而更改

Question

我正在显示这样的下拉菜单：

<DropdownMultiselect options={chartVariables} />

即使 chartVariables 是一个状态并正确更新，下拉列表的选项不会改变，当 chartVariables 更新时。

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

你能帮我找出为什么当 chartVariables 改变时选项没有改变吗？ 我是否必须修复此库，或者我是否可以“强制”重新呈现此 DropdownMultiselect？

Answer 1

上面提到的这两种方法可以帮助到你:-

根据我的理解简单描述一下:-

因为 chartVariables 在父组件中，并且作为 prop 传递给 DropdownMultiselect，它正在更新其状态 options，因此子组件中的状态组件不会每次都更新 props from parent 的值改变，他们需要强制更新。

我试过使用第一种方法，它按预期工作，

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

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

下拉组件不会随道具更改而更改

Dropdown Component does not change on Props change

reactjs

dropdown