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

Чому в наступному прикладі псевдокоду 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 {
  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 хоче бути ефективним при створенні дочірніх компонентів. Він не відобразить новий компонент, якщо він такий же, як і інший дочірній, завдяки чому завантаження сторінки відбувається швидше.

Додавання ключа змушує реагувати на надання нового компонента, тим самим скидаючи стан для цього нового компонента.

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

Використовуйте функцію setState. Так ви могли зробити

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

всередині методу обробки ручки.

Після оновлення стану він спричинить зміни, і відбудеться повторне відображення.

Ви, мабуть, повинні зробити дитину функціональним компонентом, якщо вона не підтримує жодного стану і просто надає реквізит, а потім викликає його від батьків. Альтернативою цьому є те, що ви можете використовувати гачки з функціональним компонентом (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