Question

0

148

Vistas

¿Cómo abordar con React.memo pasando accesorios como objeto?

El componente padre tiene 3 objetos

 const [inputErr, setInputErr] = useState({ email: { err: false, errMsg: '', }, password: { err: false, errMsg: '', }, }); const [inputValue, setInputValue] = useState({ email: '', // password: "", }); const inputFunction = { email: { input: { func: { onChange: testFunc, }, }, }, };

El componente principal está representando a un niño en una función de mapa como esta

 { inputs.map((el, i) => { const rules = el.rules; const err = inputErr[el.name]; const input = { value: inputValue[el.name], }; return ( <Input name={el.name} placeholder={el.placeholder} input={input} rules={rules} err={err} func={testFunc} key={el.name} /> ); }); }

El componente secundario es así

 import React from 'react'; const Test = (data) => { console.log(data); console.log('hallo from Test ----------------- '); return <h1>Iam an test </h1>; }; export default React.memo(Test);

Problema

React.memo no funciona como debería debido a este fragmento de código como he observado

 const input = { value: inputValue[el.name], };

Entonces, ¿alguien puede ayudarme a solucionar este error?

about 4 years ago · Juan Pablo Isaza

1 Respuestas

Responde la pregunta

0

Responde la pregunta

Encuentra empleos remotos

Answer 1 · 2022-07-10T10:45:53.639Z

React.memo funciona como se esperaba.
con este codigo

 const input = { value: inputValue[el.name], };

crea un nuevo objeto cada vez y, por lo tanto, el componente secundario se actualiza.
Para que no se actualice, puede pasar una función de comparación personalizada a React.memo

 function areEqual(prevProps, nextProps) { /* return true if passing nextProps to render would return the same result as passing prevProps to render, otherwise return false */ return prevProps.input.value === nextProps.input.value; } import React from 'react'; const Test = (data) => { console.log(data); console.log('hallo from Test ----------------- '); return <h1>Iam an test </h1>; }; export default React.memo(Test, areEqual);

0

148