Tengamos los componentes A y B.
El componente B solo muestra el estado de los padres en contentForB en un formato diferente y no lo manipula. Toma el estado de A como accesorio, aplica una función de transform(content) y lo muestra, por lo que cada contentForB cambia el contenido de A para B, el nuevo contenido se transforma y actualiza en B.
El problema surge cuando A quiere usar el contenido transformado de B y usarlo en otro lugar. Intenté implementarlo de manera estándar, usando la función de actualización de estado y lo pasé de A a B de esta manera:
class A extends React.Component { constructor(props) { super(props); this.state = { contentForB: "", transformedContent: "" }; this.updateTransformedContent = this.updateTransformedContent.bind(this); } updateTransformedContent(newContent) { this.setState = { transformedContent: newContent }; } render() { return ( ... <B content={ this.state.contentForB } updateTransformedContent={ this.updateTransformedContent } /> <ComponentUsingTransformedContent transformedContent = { this.state.transformedContent } /> ); } } class B extends React.Component { constructor(props) { super(props); this.transform = this.transform.bind(this); } transform(content) { let newContent = ...; this.props.updateTransformedContent(newContent); return newContent; } render() { <Something value={this.transform(this.props.content)} /> } } Sin embargo, cuando el estado de A cambia, B se reinicializa, luego cambia el estado de A llamando a updateTransformedContent que nuevamente hace que B se reinicie, lo que provoca un bucle infinito aunque updateTransformedContent cambia el objeto de estado que no es directamente pasó a B.
¿Alguna idea de cómo lidiar con tal situación correctamente?
Puede usar el método de ciclo de vida componentDidUpdate.
[codesandbox.io] https://codesandbox.io/s/cool-leaf-92nt8?file=/src/App.js:457-475
class TestB extends Component { constructor(props) { super(props); this.state = { transformed: "" }; this.transform = this.transform.bind(this); } componentDidUpdate(prevProps) { if (this.props.content !== prevProps.content) { this.transform(this.props.content); } } transform(content) { const transformed = `<h4>${this.props.content}</h4>`; this.setState({ transformed: transformed }); this.props.updateTransformedContent(transformed); return transformed; } render() { return ( <div> <h4>B Componenet:</h4> <p>{this.state.transformed}</p> </div> ); } }