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

【问题标题】：React-Hook conditional rendering (no error, but don't work)React-Hook 条件渲染（没有错误，但不起作用）
【发布时间】：2019-08-13 14:38:42
【问题描述】：

我的代码没有错误。但是我的条件，终于不行了。

  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 传递了真/假。但是渲染它并没有效果……

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

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

【问题讨论】：

标签： reactjs react-hooks conditional-rendering

【解决方案1】：

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

我发现您需要以前的状态才能做到这一点（这可能是您的困惑所在）。除了 setState({...newState}) 的对象语法之外，还有另一种带有回调函数的语法：setState(previousState => { return {...newState} }) 。使用此回调 setState 语法可以解决此问题。

这样，您的 togglePersonsHandler 函数将如下所示：

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

祝你好运！

【讨论】：

谢谢，它看起来像 Redux。

【解决方案2】：

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

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

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

【讨论】：