Реагировать: почему дочерний компонент не обновляется при изменении проп

Почему в следующем примере псевдокода Child не выполняет повторную визуализацию, когда Контейнер изменяет 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>
  }
}

Даже если я позвоню forceUpdate()после изменения значения в контейнере, Child все равно покажет старое значение.

Обновите дочерний элемент, чтобы атрибут 'key' был равен имени. Компонент будет перерисовываться каждый раз при изменении ключа.

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

Потому что потомки не перерисовываются, если свойства родителя меняются, но если изменяется его СОСТОЯНИЕ :)

Вы показываете следующее: https://facebook.github.io/react/tips/communicate-between-components.html

Он будет передавать данные от родителя к потомку через реквизиты, но здесь нет логики перерисовки.

Вам нужно установить какое-то состояние для родителя, а затем повторно отобразить дочерний элемент в состоянии изменения родителя. Это могло помочь. https://facebook.github.io/react/tips/expose-component-functions.html

У меня такая же проблема. Это мое решение, я не уверен, что это хорошая практика, скажите мне, если нет:

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

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

UPD: Теперь то же самое можно делать с помощью React Hooks: (только если компонент - это функция)

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

Согласно философии React, компонент не может менять свои свойства. они должны быть получены от родителя и должны быть неизменными. Только родитель может изменять свойства своих потомков.

красивое объяснение состояния и реквизита

также прочтите эту ветку Почему я не могу обновить реквизиты в react.js?

Вам следует использовать setStateфункцию. В противном случае состояние не сохранит ваше изменение, независимо от того, как вы используете 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>
        }
    }
}

Ваш код кажется недействительным. Я не могу протестировать этот код.

При создании компонентов React из functionsи useState.

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

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

Это не работает

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

Это работает (добавление ключа)

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

Подтверждено, добавление ключа работает. Я просмотрел документацию, чтобы попытаться понять, почему.

React хочет быть эффективным при создании дочерних компонентов. Он не будет отображать новый компонент, если он такой же, как другой дочерний элемент, что ускоряет загрузку страницы.

Добавление ключа заставляет React отрисовывать новый компонент, таким образом сбрасывая состояние для этого нового компонента.

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

Используйте функцию setState. Так ты мог бы сделать

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

внутри метода обработки события.

Как только состояние будет обновлено, оно вызовет изменения, и произойдет повторный рендеринг.

Вероятно, вам следует сделать Child как функциональный компонент, если он не поддерживает какое-либо состояние и просто отображает реквизиты, а затем вызывает его из родителя. Альтернативой этому является то, что вы можете использовать хуки с функциональным компонентом (useState), что приведет к повторной визуализации компонента без состояния.

Также не следует изменять пропа, поскольку они неизменяемы. Поддерживать состояние компонента.

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

Я столкнулся с той же проблемой. У меня естьTooltip компонент, который получал showTooltipопору, которую я обновлял для Parentкомпонента на основе ifусловия, он обновлялся в Parentкомпоненте, но Tooltipкомпонент не отображался.

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

Ошибка, которую я сделал, - это объявление о сдаче showTooltipв аренду.

Я понял, что делаю неправильно. Я нарушал принципы работы рендеринга. Замена хуков сработала.

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

определить измененные свойства в mapStateToProps метода подключения дочернего компонента.

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

export default connect(mapStateToProps)(ChannelItem);

В моем случае канал channelList обновлен, поэтому я добавил chanelList в 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}
    />
  );
}

в этом примере используется useEffectдля изменения состояния при propsизменении.