tengo ese componente:
<SelectCampanha titulo="Preenchimento obrigatório" listaOpcoes={ category ? riskModel.filter((item) => item.CategoryType.includes(categoria) ) : riskModel} />Ahora quiero pasar este filtro a una función.
const filter = () => { return category ? riskModel.filter((item) => item.CategoryType.includes(categoria) ) : riskModel }Me gustaría saber la diferencia entre llamar a una función de flecha y una función en un pase de accesorios.
¿Cuál es la forma correcta de llamar a esta función en el componente?
<SelectCampanha titulo="Preenchimento obrigatório" listaOpcoes={filter()} />o
<SelectCampanha titulo="Preenchimento obrigatório" listaOpcoes={() => filter()} />Cuando utilicé la última opción, parece que ejecutó la función una vez y no hubo tiempo para actualizar el estado de las variables.
Me gustaría saber la diferencia entre llamar a una función de flecha y una función en un pase de accesorios.
En Javascript, se llama a una función cuando aparece functionName() (tenga en cuenta el () ). Por lo general, desea pasar una función a su componente para llamarlo más tarde (por ejemplo, como un controlador de clic dentro del componente) en lugar de pasar el return value de una función al componente.
function myMethod() { return 1 } <MyComponent myPassedMethod={myMethod} myPassedValue={myMethod()} />
En el ejemplo dado, los props de MyComponent serían así:
{ myPassedMethod: // function definition of "myMethod" myPassedValue: 1 //return value of "myMethod" }Entonces, cuando pasa el método de filtro así:
listaOpcoes={filter()}
pasará el return value de filter() .
Si lo pasas así:
listaOpcoes={() => filter()}
se pasa una function a los accesorios del componente que podría llamarse dentro del componente más adelante.
Quizás este ejemplo de dos expresiones equivalentes también aclare un poco las cosas:
listaOpcoes={filter()} es equivalente a listaOpcoes={() => { return filter()}()}
Pasar una función no es lo mismo que pasar su valor devuelto.
Cuando pasa filter() , se llamará y se pasará el valor devuelto .
Alternativamente, si pasa () => filter() es idéntico a pasar filter , y luego pasa la función real. Esto es útil cuando desea decopular el cálculo del contexto en el que se pasa la función.
En su caso, parece que desea envolver el cálculo en la función de filter , por lo que debe pasar filter() como apoyo, ya que está utilizando su resultado como apoyo real.
Depende de lo que espere su accesorio si desea pasar elementos filtrados, debe evitar la función de flecha y usar
<SelectCampanha titulo="Preenchimento obrigatório" listaOpcoes={filter()} />