React-Hook条件渲染（没有错误，但不起作用）

Question

我的代码中没有错误。但是我的情况，终于不行了。

  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>
 )
} 

当我点击按钮时，personsState.showPersons传递了true / false。但渲染它并没有效果......

在原点，我有更改setPersonState但它没有做任何事情......

---

沙箱：https://codesandbox.io/s/3yn05lro81

Answer 1

由于personsState是不可变的，因此您无法重新分配它。您必须像在其他函数中一样使用setPersonsState进行设置。

我认为你需要以前的状态才能做到这一点（这可能是你的困惑来自哪里）。除了setState（{... newState}）的对象语法之外，还有另一种采用回调函数的语法：setState（previousState => {return {... newState}}）。这是使用此回调setState语法解决的。

这样，你的togglePersonsHandler函数看起来像这样：

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

祝好运！

Answer 2

我想你需要在你的切换函数中调用setPersonsState：

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

没有setPersonsState，您的组件将不会重新渲染。