React-Hook условного рендеринга (без ошибок, но не работает) - PullRequest
Новая
       24

React-Hook условного рендеринга (без ошибок, но не работает)

0 голосов
/ 22 марта 2019

У меня нет ошибок в моем коде. Но мое состояние, наконец, не работает. 

  const togglePeronsHandler = () => {
    const doesShow = personsState.showPersons;
    personsState.showPersons = !doesShow;

    console.log(personsState);
  }

  (...)

  <button className="btn btn-sm btn-primary" 
    onClick={togglePeronsHandler}>Toggle Person
  </button>
  <div className="persons">
      {
       personsState.showPersons === true ?
     (
   personsState.persons.map( (item, index) => (
   <Person name={ item.name }
           index={index}
           age={ item.age }
           click={switchNameHandler}
           changed={nameChangeHandler}/>
  ))
 ) :
 (
   <div className="alert alert-info">No body</div>
 )
}

Когда я нажимаю на кнопку, PersonState.showPersons принимает значение true / false. Но рендеринг не был эффектом ...

В начале я изменил setPersonState, но он ничего не сделал ...

Песочница: https://codesandbox.io/s/3yn05lro81

Ответы [ 2 ]

1 голос
/ 22 марта 2019

Так как PersonState является неизменным, вы не можете переназначить его.Вы должны установить его с помощью setPersonsState, как вы это делали в других функциях.

Я вижу, что вам нужно предыдущее состояние, чтобы сделать это (возможно, именно отсюда и возникла ваша путаница).Помимо синтаксиса объекта setState ({... newState}) существует другой синтаксис, который принимает функцию обратного вызова: setState (previousState => {return {... newState}}) .Это решается с помощью синтаксиса обратного вызова setState.

Таким образом, ваша функция togglePersonsHandler будет выглядеть так: 

const togglePersonsHandler = () => {
  setPersonsState(previousPersonsState => {
    const doesShow = previousPersonsState.showPersons;
    return {
      ...previousPersonsState,
      showPersons: !doesShow
    };
  });
};

Удачи!

0 голосов
/ 22 марта 2019

Я думаю, вам нужно вызвать setPersonsState в вашей функции переключения: 

  const togglePeronsHandler = () => {
    const doesShow = personsState.showPersons;
    setPersonsState({showPersons:!doesShow, persons: personsState.persons});
  }

Без setPersonsState ваш компонент не будет перерисован.

...