主页 / 问题 / 964942
Accepted
Александр
Asked:2020-04-03 17:55:11 +0000 UTC2020-04-03 17:55:11 +0000 UTC

React：如何更改传递给函数的状态

  • 772
const switchInputs = (state) => {
  console.log(state.switchInput) // disabled
  this.setState(() => {
    return {
      switchInput: 'enabled'
    }
  });
}

给出一个错误：

TypeError：无法读取未定义的属性“setState”

函数在另一个文件中，状态数据到达函数

reactjs

1 个回答

  1. Best Answer

    将值this从组件传递给函数，this那里有另一个变量，因此出现错误。毕竟this每个函数调用都有不同的值，而值也this取决于函数的调用方式。

    const switchInputs = (me, state) => {
  console.log(state.switchInput) // disabled
  me.setState(() => {
    return {
      switchInput: 'enabled'
    }
  });
}

    好吧，调用，传入this组件的第一个参数。以前，您使用一个参数调用函数，但现在您需要使用两个参数调用它。有用的学习链接：this

    一般不建议这样做，最好在组件本身改变状态，在里面写函数，以免产生副作用。

    偏离组件外传递this和调用的话题setState，我想说明几点。

    • 这似乎很明显，但是您需要分解并制作小组件。即把大的部件从几个较小的部件中分成几部分；
    • 创建小组件，尽量让它们无状态（所谓stateless），这被认为是高品味的标志；
    • 此外，为了卸载组件和移动业务逻辑，使用了Redux。有了它，部分逻辑就进入了 reducer 和 action。Reducers 通过计算新状态来处理动作。整个应用程序的新状态被发送到单个存储。组件通过props;获得它们的新状态
    • 和 Redux 一起可以使用Redux-Saga——所谓的 sagas，在 sagas 内部组合业务逻辑非常方便，从而使 Redux 变得更容易（将业务逻辑集中在 sagas 中）；
    • 您还可以突出显示在多个地方使用且不更改状态的辅助函数。不改变状态的函数可以移到组件之外，不用担心这会导致副作用。

    因此，通过在开发 React 应用程序时结合简单和复杂的方法，您可以获得干净、易于理解且不繁琐的代码。我在描述中附上了链接，但我会单独拿出来：

    UPD：起初，一切似乎都很复杂，但在你设法将Redux融入应用程序并编写一些 action 和 reducer 之后，它会变得更加容易和简单。建议在项目开发的早期就开始使用 Redux。在一个大型项目中，没有使用 Redux 的经验，很难将 Redux 收紧，这会带来很大的变化，需要很多时间。

    • 2

相关问题