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

我认为您需要在切换函数中调用 set Person State：

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

没有 setPersonsState，您的组件将不会重新呈现。

Answer 2

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

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

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

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

祝你好运！

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

React-Hook conditional rendering (no error, but don't work)

reactjs

conditional-rendering

react-hooks