构建下拉组件答案

【问题标题】：Building Dropdown component构建下拉组件
【发布时间】：2020-04-16 15:09:10
【问题描述】：

我在构建 dropdown component 时遇到问题。在获取所选项目的功能中，我遇到了这个错误：

重新渲染过多。 React 限制 renders 的数量以防止无限循环。

组件代码：

import React, { useState } from 'react';
import PropTypes from 'prop-types';

import '../../../App.css'

function Dropdown({ items }) {

    //const [list, setList] = useState(items);

    const [selectedItem, setSelectedItem] = useState(items[0]);
    const [showItems, setShowItem] = useState(false);
    const [setExpand, setExpandState] = useState("");


    function toggleDropdown() {
        setExpandState(setExpand === "" ? "dropdown-expanded dropdown-expanded-down" : "");
        setShowItem(showItems === false ? true : false);
    };

    const Changed = (item) => {

        setShowItem(false);
        setSelectedItem(item);

    }


    return (

        <div data-dropdown="" className={`dropdown-container dropdown ${setExpand}`} onClick={toggleDropdown} >
            <div className="dropdown-display">
                <div className="dropdown-display-content" >
                    <span data-expression="" class="OSFillParent"> {selectedItem.value}  </span>
                </div>
            </div>
            <div className="dropdown-list" style={{ display: showItems ? 'block' : 'none' }}  >
                <div className="scrollable-list scrollable-list-with-scroll">
                    {items.map(item =>
                        <div className="dropdown-popup-row" key={item.id} onClick={Changed(item)} > {item.value} </div>
                    )}
                </div>
            </div>

        </div>

    );


}

Dropdown.propTypes = {
    items: PropTypes.array,

}

export default Dropdown;

【问题讨论】：

标签： reactjs drop-down-menu components

【解决方案1】：

问题出在onClick={Changed(item)}

您在每次渲染时都调用它，并且每次渲染都会修改状态，因此会再次递归调用。

您可以通过以下方式解决它：

<div className="dropdown-popup-row" 
  key={item.id} 
  onClick={() => Changed(item)}> 
  {item.value} 
</div>

【讨论】：

完美！非常感谢:)