构建下拉组件

Question

我在构建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;

Answer 1

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

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

您可以通过执行以下操作来解决它：

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