Reactjs 使用react picky select菜单时出现问题

我最近下载了react-picky，并在map函数中使用它来循环浏览我的动态数据。在“挑剔”中，我将multiselect设置为true。 然而，在onchange函数上，我只获取当前选定的值，而不获取为picky选择的值列表

am面临的问题是在multiselect的情况下，其中值将是包含当前选定项的单个对象，而不是选定项的列表。你能帮我解决这个问题吗。我已经尝试了所有可能的解决方案，但似乎都不起作用。如果能提供任何帮助，我将不胜感激，因为我已经陷入这个问题一段时间了

const sectorsData = [
  {
    name: "Technology",
    options: [
      {
        id: "1",
        name: "AI & Analytics"
      },
      {
        id: "2",
        name: "Robotics"
      },
      {
        id: "3",
        name: "IoT"
      }
    ]
  },
  {
    name: "Sector",
    options: [
      {
        id: "1",
        name: "Automotive"
      },
      {
        id: "2",
        name: "Oil and gas"
      },
      {
        id: "3",
        name: "Consumer Products"
      }
    ]
  },
  {
    name: "Accounts",
    options: [
      {
        id: "1",
        name: "Alphabet Inc."
      },
      {
        id: "2",
        name: "General Motors Company"
      },
      {
        id: "3",
        name: "Consumer Products"
      },
      {
        id: "4",
        name: "State Street Corporation"
      }
    ]
  },
  {
    name: "Region",
    options: [
      {
        id: "1",
        name: "Canada Region"
      },
      {
        id: "2",
        name: "Central"
      },
      {
        id: "3",
        name: "FSO Americas"
      },
      {
        id: "4",
        name: "Latam North"
      },
      {
        id: "5",
        name: "Latam South"
      }
    ]
  }
];

const App = props => {
  const [assetsAddedState, setAssetsAddedState] = React.useState({
    selectedItems: []
  });

  const selectedOption = (name, value) => {
    setAssetsAddedState(prev => {
      return { ...prev, [name]: value };
    });
  };

  return (
    <form className="create-work-form-container" noValidate autoComplete="off">
      {sectorsData.map((selectItem, i) => (
        <Picky
          value={assetsAddedState[selectItem.name]}
          onChange={selectedOption.bind(this, selectItem.name)}
          options={selectItem.options}
          placeholder={selectItem.name}
          numberDisplayed={1}
          valueKey="id"
          labelKey="name"
          multiple={true}
          includeSelectAll={true}
          includeFilter={true}
          dropdownHeight={600}
          className="multiSelectControl "
          name={selectItem.name}
        />
      ))}
    </form>
  );
};

const sectorsData=[
{
名称：“技术”，
选项：[
{
id:“1”，
名称：“人工智能与分析”
},
{
id:“2”，
名称：“机器人学”
},
{
id:“3”，
名称：“物联网”
}
]
},
{
名称：“部门”，
选项：[
{
id:“1”，
名称：“汽车”
},
{
id:“2”，
名称：“石油和天然气”
},
{
id:“3”，
名称：“消费品”
}
]
},
{
名称：“账户”，
选项：[
{
id:“1”，
名称：“字母表公司”
},
{
id:“2”，
名称：“通用汽车公司”
},
{
id:“3”，
名称：“消费品”
},
{
id:“4”，
名称：“州立街公司”
}
]
},
{
名称：“区域”，
选项：[
{
id:“1”，
名称：“加拿大地区”
},
{
id:“2”，
名称：“中央”
},
{
id:“3”，
名称：“FSO美洲”
},
{
id:“4”，
名称：“拉坦北”
},
{
id:“5”，
名称：“南拉坦”
}
]
}
];
const App=props=>{
常量[assetsAddedState，setAssetsAddedState]=React.useState({
selectedItems:[]
});
const selectedOption=（名称、值）=>{
setAssetsAddedState（上一个=>{
返回{…prev[name]：value}；
});
};
返回(
{sectorsData.map（（selectItem，i）=>(
))}
);
};

---

值应返回用户选择的多个值。

查看这是否适用于您：

CodeSandbox上的工作示例：

从“React”导入React；
从“react dom”导入{render}；
从“反应挑剔”导入挑剔；
导入“react picky/dist/picky.css”；
常量扇区1={
名称：“技术”，
选项：[
{
id:“1”，
名称：“人工智能与分析”
},
{
id:“2”，
名称：“机器人学”
},
{
id:“3”，
名称：“物联网”
}
]
};
常量扇区2={
名称：“部门”，
选项：[
{
id:“4”，
名称：“汽车”
},
{
id:“5”，
名称：“石油和天然气”
},
{
id:“6”，
名称：“消费品”
}
]
};
常量扇区3={
名称：“账户”，
选项：[
{
id:“7”，
名称：“字母表公司”
},
{
id:“8”，
名称：“通用汽车公司”
},
{
身份证号码：“9”，
名称：“消费品”
},
{
身份证号码：“10”，
名称：“州立街公司”
}
]
};
常量扇区4={
名称：“区域”，
选项：[
{
id:“11”，
名称：“加拿大地区”
},
{
id:“12”，
名称：“中央”
},
{
id:“13”，
名称：“FSO美洲”
},
{
id:“14”，
名称：“拉坦北”
},
{
身份证号码：“15”，
名称：“南拉坦”
}
]
};
const App=props=>{
//const[assetsAddedState，setAssetsAddedState]=React.useState（[]）；
const[selected1，setSelected1]=React.useState（[]）；
const[selected2，setSelected2]=React.useState（[]）；
const[selected3，setSelected3]=React.useState（[]）；
const[selected4，setSelected4]=React.useState（[]）；
const selectedOption1=值=>{
log（“VAlue:+JSON.stringify（VAlue））；
SETSELECTED 1（值）；
};
const selectedOption2=值=>{
log（“VAlue:+JSON.stringify（VAlue））；
SETSELECTED 2（值）；
};
const selectedOption3=值=>{
log（“VAlue:+JSON.stringify（VAlue））；
设置选择3（值）；
};
const selectedOption4=值=>{
log（“VAlue:+JSON.stringify（VAlue））；
设置选择4（值）；
};
返回(
);
};
render（，document.getElementById（“根”））；

如果可以，请提供一个沙箱，其中包含一个功能最少的示例，你能试试这个吗？当我有不同的挑剔的组件时，它工作得很好，但是当我尝试在带有multiselect true的map函数中使其动态时，它失败了。

import React from "react";
import { render } from "react-dom";
import Picky from "react-picky";
import "react-picky/dist/picky.css";

const sector1 = {
  name: "Technology",
  options: [
    {
      id: "1",
      name: "AI & Analytics"
    },
    {
      id: "2",
      name: "Robotics"
    },
    {
      id: "3",
      name: "IoT"
    }
  ]
};
const sector2 = {
  name: "Sector",
  options: [
    {
      id: "4",
      name: "Automotive"
    },
    {
      id: "5",
      name: "Oil and gas"
    },
    {
      id: "6",
      name: "Consumer Products"
    }
  ]
};
const sector3 = {
  name: "Accounts",
  options: [
    {
      id: "7",
      name: "Alphabet Inc."
    },
    {
      id: "8",
      name: "General Motors Company"
    },
    {
      id: "9",
      name: "Consumer Products"
    },
    {
      id: "10",
      name: "State Street Corporation"
    }
  ]
};

const sector4 = {
  name: "Region",
  options: [
    {
      id: "11",
      name: "Canada Region"
    },
    {
      id: "12",
      name: "Central"
    },
    {
      id: "13",
      name: "FSO Americas"
    },
    {
      id: "14",
      name: "Latam North"
    },
    {
      id: "15",
      name: "Latam South"
    }
  ]
};

const App = props => {
  // const [assetsAddedState, setAssetsAddedState] = React.useState([]);

  const [selected1, setSelected1] = React.useState([]);
  const [selected2, setSelected2] = React.useState([]);
  const [selected3, setSelected3] = React.useState([]);
  const [selected4, setSelected4] = React.useState([]);

  const selectedOption1 = value => {
    console.log("VAlue: " + JSON.stringify(value));
    setSelected1(value);
  };

  const selectedOption2 = value => {
    console.log("VAlue: " + JSON.stringify(value));
    setSelected2(value);
  };

  const selectedOption3 = value => {
    console.log("VAlue: " + JSON.stringify(value));
    setSelected3(value);
  };

  const selectedOption4 = value => {
    console.log("VAlue: " + JSON.stringify(value));
    setSelected4(value);
  };

  return (
    <form className="create-work-form-container" noValidate autoComplete="off">
      <Picky
        value={selected1}
        onChange={selectedOption1}
        options={sector1.options}
        placeholder={sector1.name}
        numberDisplayed={1}
        valueKey="id"
        labelKey="name"
        multiple={true}
        includeSelectAll={true}
        includeFilter={true}
        dropdownHeight={600}
        className="multiSelectControl "
        name={sector1.name}
      />
      <Picky
        value={selected2}
        onChange={selectedOption2}
        options={sector2.options}
        placeholder={sector2.name}
        numberDisplayed={1}
        valueKey="id"
        labelKey="name"
        multiple={true}
        includeSelectAll={true}
        includeFilter={true}
        dropdownHeight={600}
        className="multiSelectControl "
        name={sector2.name}
      />
      <Picky
        value={selected3}
        onChange={selectedOption3}
        options={sector3.options}
        placeholder={sector3.name}
        numberDisplayed={1}
        valueKey="id"
        labelKey="name"
        multiple={true}
        includeSelectAll={true}
        includeFilter={true}
        dropdownHeight={600}
        className="multiSelectControl "
        name={sector3.name}
      />
      <Picky
        value={selected4}
        onChange={selectedOption4}
        options={sector4.options}
        placeholder={sector4.name}
        numberDisplayed={1}
        valueKey="id"
        labelKey="name"
        multiple={true}
        includeSelectAll={true}
        includeFilter={true}
        dropdownHeight={600}
        className="multiSelectControl "
        name={sector4.name}
      />
    </form>
  );
};

render(<App />, document.getElementById("root"));