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

当我单击按钮时，personState.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，您的组件将不会重新呈现。

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

2 个答案: