javascript - 如何在 useEffect 中调用 prop 函数？

Question

我试图在反应组件上删除此警告

Line 19:8:  React Hook useEffect has a missing dependency: 'handleChange'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

这是组件

const SelectButton = (props)=>{
    const [activeState, setActiveState] = useState(false)
    const label = props.label
    
    const handleClick = () =>{
        setActiveState(!activeState)
        //props.handleChange(label,activeState)
    }

    const handleChange = props.handleChange
    
    useEffect(()=>{
        handleChange(label,activeState)
    }, [label,activeState])

    return(
        <button 
                type="button" 
                onClick={handleClick} 
                className={"container-form-button "+(activeState?"active":"")}>
                    {label}
        </button>
    )
}

如果我试图删除handleClick 内handleChange 的注释，handleChange 不能正常工作

如果我尝试将 useEffect 更改为这样的事情

useEffect(()=>{
   handleChange(label,activeState)
}, [label,activeState,handleChange])

或者

useEffect(()=>{
       props.handleChange(label,activeState)
    }, [label,activeState,props.handleChange])

它尝试多次重做并抛出此错误。

Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render

实际上它就像第一个代码一样工作，但我仍然有警告

这是父原始handleChange

const handleChange = (name,value)=>{
        setSelected({...selected, [name]:value})
    }

父组件

const CategorySearcher = (props) =>{
const ciudades = ["Guadalajara","Zapopan","Tlajomulco"]
const tipos = ["Casa","Departamento"]

const [selected, setSelected] = useState({})

const handleChange = useCallback(
    (label,value) => {
            setSelected({...selected, [label]:value})
        },
    [selected],
)
useEffect(() => {
    console.log(selected);
}, [selected])

const cities = ciudades.map((city)=><SelectButton key={city} handleChange={handleChange} label={city}/>)

const types = tipos.map((tipo)=><SelectButton key={tipo} handleChange={handleChange} label={tipo}/>)

let history = useHistory();

const setUrlSearch = ()=>{
    let urlSearch = "search/q="
    let attToSearch = []
    for (var key in selected) {
        selected[key]?attToSearch.push(key):console.log("Nada")
    }
    /*
    attToSearch.forEach((it)=>{
        urlSearch = urlSearch+"&"+it
    })*/
    console.log(urlSearch);
    history.push(urlSearch+attToSearch)
}

return (
    <section className="general-container">
        <div className="container-box">
            <span className="container_title">
                Tu nuevo hogar esta aquí :)
            </span>
        </div>
        
        <div className="container-form">
            <form className="container-form-box">
                <div className="container-form-cities">
                    <div className="container-form-subtitle">
                    Ciudades
                    </div>
                    <div className="container-buttons">
                        {cities}
                    </div>
                </div>

                <div className="container-form-cities">
                    <div className="container-form-subtitle">Tipo de hogar</div>
                    <div className="container-buttons">
                        {types}
                    </div>
                </div>

                <div className="container-box-button">
                    <button className="button-form-CTA" onClick={setUrlSearch}>
                        Buscar
                    </button>
                </div>

            </form>
        </div>
    </section>
)

}

标签： javascriptreactjsuse-effect

Answer 1

在将函数作为道具传递之前，您应该使用 useCallback 钩子来包装函数。文档可以在这里找到。

你不应该那样使用 useEffect 。

const SelectButton = ({ label, handleChange }) => {
  const [activeState, setActiveState] = React.useState(false);

  const handleClick = () => {
    const newState = !activeState
    setActiveState(newState);
    handleChange(label, newState);
  };

  return (
    <button
      type="button"
      onClick={handleClick}
      className={"container-form-button " + (activeState ? "active" : "")}
    >
      {label}
    </button>
  );
};