Reaccionar: por qué el componente hijo no se actualiza cuando el accesorio cambia

¿Por qué en el siguiente ejemplo de pseudocódigo Child no se vuelve a procesar cuando Container cambia foo.bar?

Container {
  handleEvent() {
    this.props.foo.bar = 123
  },

  render() {
    return <Child bar={this.props.foo.bar} />
}

Child {
  render() {
    return <div>{this.props.bar}</div>
  }
}

Incluso si llamo forceUpdate()después de modificar el valor en Contenedor, Child aún muestra el valor anterior.

Actualice el hijo para que tenga el atributo 'clave' igual al nombre. El componente se volverá a procesar cada vez que cambie la clave.

Child {
  render() {
    return <div key={this.props.bar}>{this.props.bar}</div>
  }
}

Porque los niños no vuelven a rendirse si los accesorios del padre cambian, pero si su ESTADO cambia :)

Lo que está mostrando es esto: https://facebook.github.io/react/tips/communicate-between-components.html

Pasará datos de padre a hijo a través de accesorios, pero no hay lógica de reenvío allí.

Debe establecer algún estado para el padre y luego volver a entregar el niño en el estado de cambio de padre. Esto podria ayudar. https://facebook.github.io/react/tips/expose-component-functions.html

Yo tuve el mismo problema. Esta es mi solución, no estoy seguro de que sea una buena práctica, dime si no:

state = {
  value: this.props.value
};

componentDidUpdate(prevProps) {
  if(prevProps.value !== this.props.value) {
    this.setState({value: this.props.value});
  }
}

UPD: ahora puede hacer lo mismo con React Hooks: (solo si el componente es una función)

const [value, setValue] = useState(propName);
// This will launch only if propName value has chaged.
useEffect(() => { setValue(propName) }, [propName]);

Según la filosofía React, el componente no puede cambiar sus accesorios. deben recibirse de los padres y deben ser inmutables. Solo los padres pueden cambiar los accesorios de sus hijos.

buena explicación sobre estado vs accesorios

también, lea este hilo ¿Por qué no puedo actualizar los accesorios en react.js?

Deberías usar la setStatefunción. De lo contrario, el estado no guardará su cambio, sin importar cómo use forceUpdate.

Container {
    handleEvent= () => { // use arrow function
        //this.props.foo.bar = 123
        //You should use setState to set value like this:
        this.setState({foo: {bar: 123}});
    };

    render() {
        return <Child bar={this.state.foo.bar} />
    }
    Child {
        render() {
            return <div>{this.props.bar}</div>
        }
    }
}

Tu código parece no válido. No puedo probar este código.

Cuando cree componentes React de functionsy useState.

const [drawerState, setDrawerState] = useState(false);

const toggleDrawer = () => {
      // attempting to trigger re-render
      setDrawerState(!drawerState);
};

Esto no funciona

         <Drawer
            drawerState={drawerState}
            toggleDrawer={toggleDrawer}
         />

Esto funciona (agregando clave)

         <Drawer
            drawerState={drawerState}
            key={drawerState}
            toggleDrawer={toggleDrawer}
         />

Confirmado, agregar una clave funciona. Revisé los documentos para tratar de entender por qué.

React quiere ser eficiente al crear componentes secundarios. No representará un nuevo componente si es igual a otro elemento secundario, lo que hace que la página se cargue más rápido.

Agregar una clave obliga a React a representar un nuevo componente, restableciendo así el estado para ese nuevo componente.

https://reactjs.org/docs/reconciliation.html#recursing-on-children

Use la función setState. Entonces podrías hacer

       this.setState({this.state.foo.bar:123}) 

dentro del método de evento de manejo.

Una vez que se actualiza el estado, se activarán los cambios y se volverá a procesar.

Probablemente debería hacer que el Child sea un componente funcional si no mantiene ningún estado y simplemente presenta los accesorios y luego lo llama desde el padre. Una alternativa a esto es que puede usar ganchos con el componente funcional (useState) que hará que el componente sin estado se vuelva a representar.

Además, no debe alterar los propas ya que son inmutables. Mantener el estado del componente.

Child = ({bar}) => (bar);

Me encontraba con el mismo problema. Tenía un Tooltipcomponente que estaba recibiendo showTooltipapoyo, que estaba actualizando el Parentcomponente en función de una ifcondición, se estaba actualizando en el Parentcomponente pero el Tooltipcomponente no se estaba procesando.

const Parent = () => {
   let showTooltip = false;
   if(....){ showTooltip = true; }
   return(
      <Tooltip showTooltip={showTooltip}></Tooltip>
   )
}

El error que estaba haciendo es declarar showTooltip como un let.

Me di cuenta de lo que estaba haciendo mal. Estaba violando los principios de cómo funciona el renderizado. Reemplazarlo con ganchos hizo el trabajo.

const [showTooltip, setShowTooltip] =  React.useState<boolean>(false);

definir accesorios modificados en mapStateToProps del método de conexión en el componente hijo.

function mapStateToProps(state) {
  return {
    chanelList: state.messaging.chanelList,
  };
}

export default connect(mapStateToProps)(ChannelItem);

En mi caso, el canal de channelList se actualiza, así que agregué chanelList en mapStateToProps

export default function DataTable({ col, row }) {
  const [datatable, setDatatable] = React.useState({});
  useEffect(() => {
    setDatatable({
      columns: col,
      rows: row,
    });
  /// do any thing else 
  }, [row]);

  return (
    <MDBDataTableV5
      hover
      entriesOptions={[5, 20, 25]}
      entries={5}
      pagesAmount={4}
      data={datatable}
    />
  );
}

este ejemplo se usa useEffectpara cambiar el estado cuando se propscambia.