React 下拉值冲突

Question

我有一个很好的下拉列表，可以检查点击值是否相同，这要归功于@david： https://codesandbox.io/s/laughing-leftpad-sepuly?file=/src/app/app/app.js

我使用下拉列表来更新参数，我在parter carts in parter carts y ye parter carts in parten成分。这是通过SETVAL（ID）通过单击函数发送给父的。问题是，当我需要使用多个状态时，下拉次数断开的功能。

const ExploreCategoriesDropdown = ({ Title, param, setVal }) => {

    const [dropdownOpen, setDropdownOpen] = useState(false);
    const [titleName, setTitleName] = useState(Title);

    const [data, setData] = useState([]);

    useEffect(() => {
        APILocalData(param)
            .then((res) => {
                setData(res.data)
            })
    }, [])

    function DropdownComponent() {

        function clicked(name, id) {
            if (name === titleName) {
                console.log("Same Clicked!");
                setTitleName(Title) //When same val is clicked, titleName should default
                setVal() //send empty parameter when value cleared
            } else {
                console.log("Different Clicked!");
                setTitleName(name);
                setVal(id) //send parameter value based on id prop
            }
        }

        return (
        <Dropdown
            isOpen={dropdownOpen}
            toggle={() => setDropdownOpen(!dropdownOpen)}
        >
        <DropdownToggle className="btn_white_dark_border dropdown_border" button caret>
            <span className="pe-4">{titleName}</span>
        </DropdownToggle>
        <DropdownMenu>
                {data.map((v, i) => (
                <DropdownItem
                    key={i}
                    value={v.Name}
                        onClick={() => clicked(v.Name, v.Id)
                    }
                >
                {v.Name}
                </DropdownItem>
            ))}
        </DropdownMenu>
        </Dropdown>
        );
    }

当我添加setVal（）时，出现了问题。我是否应该利用Usestate来处理这些互动？

Answer 1

是的，您可以使用USESTATE挂钩存储选定的下拉套件：

const [selectionDropDownItemid，setSelectedDropdownItemid] = usestate（null）;

以及在单击功能中比名称更好地比较ID。

另外，您可以将所有数据存储在一个状态下，

const [selectedDropdownItem, setSelectedDropdownItem] = useState(null);

然后将其存储在单击函数中：

setSelectedDropdownItem({ name: name,  id: id });