Как хуки могут обновить реквизиты, переданные компоненту? - PullRequest
Новая
       6

Как хуки могут обновить реквизиты, переданные компоненту?

0 голосов
/ 07 июля 2019

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

Я пытался использовать ловушку useEffect для просмотра как реквизита, так и реквизита.propIWantToChange, но я не могу передать обновление компоненту после его рендеринга.

App.js 

let tracker = true;

const handleChangeTracker = () => {
  tracker = !tracker
}

const App = props => {
  <React.Fragment>
    <button onClick={handleChangeTracker} >Change</button>
    <Component1 active={tracker} />
    <Component2 />
    <Component3 />
    <Component4 />
  </React.Fragment>
}

Component1.js

const Component1 = props => {

  useEffect(() => {
    console.log(props.active)
  }, [props.active])

  return (  
    <div>{props.active && "You see this when its true"}</div>  
  )
}

Когда кнопка нажата, я ожидаю, что значение трекера переключится между истиной и ложью.Затем я хочу передать это новое значение в Component1.В настоящее время он изменит значение (я отслеживаю его через журналы консоли), но не передаст новое значение компоненту.

1 Ответ

1 голос
/ 07 июля 2019

Значение не передается дочернему компоненту, потому что ваша переменная 'tracker' не сохраняется в состоянии.Изменение значения состояния запускает новый рендер, а не изменение значения переменной.

Таким образом, когда «tracker» обновляется в «handleChangeTracker», он не запускает новый рендеринг, и, следовательно, новое значение не передается дочернему компоненту и, следовательно, нет нового рендеринга дочернего компонента.

Решение состоит в том, чтобы сохранить 'tracker' в состоянии и затем обновить состояние в 'handleChangeTracker'. 

this.state = { tracker = true; }

const handleChangeTracker = () => {
  this.setState({
            tracker: !tracker
        })
}

const App = props => {
  <React.Fragment>
    <button onClick={handleChangeTracker} >Change</button>
    <Component1 active={this.state.tracker} />
    <Component2 />
    <Component3 />
    <Component4 />
  </React.Fragment>
}
...