代码之家 › 专栏 › 技术社区 › Vladimir Humeniuk

从子组件更改父状态不起作用

reactjs javascript

Vladimir Humeniuk · 技术社区 · 6 年前

state = {
   value: 0
}

add() {
   let { value } = this.state

   value++

   this.setState({ value: value})
}

remove() {
   let { value } = this.state

   value--

   this.setState({ value: value})
}

render() {
   return(
      <Child add={this.add} remove={this.remove} />
   )
}

和子组件:

...

render() {
   const { add, remove } = this.props

   return(
      <div>
         <button onClick={() => add()}>Add</button>
         <button onClick={() => remove()}>Remove</button>
      </div>
   )
}

我想更新一下 value 当我单击子组件中的按钮时,父组件中的状态。但当我尝试这样做时,我收到了一个错误:

无法读取未定义的属性“state”

我做错了什么?提前谢谢。

4 回复 | 直到 6 年前

Thomas Arbona 6 年前

this . 有两种方法可以解决这个问题。

箭头函数

arrow functions 定义自动绑定的函数 这

add = () => {
   let { value } = this.state

   value++

   this.setState({ value: value})
}

remove = () => {
   let { value } = this.state

   value--

   this.setState({ value: value})
}

绑定函数

在 constructor 对于组件,可以使用 bind 函数,如下所示:

constructor(props) {
  super(props);
  this.add = this.add.bind(this);
  this.remove = this.remove.bind(this);
}

Kishan Jaiswal 6 年前

  <Child add={this.add.bind(this)} remove={this.remove.bind(this)} />

这样地

henrik123 6 年前

export class SomeComponent extends React.Component {
    constructor(props) {
        super(props);
        this.remove = this.remove.bind(this);
        this.add = this.add.bind(this);
    }

    add() {
     let { value } = this.state

      value++

      this.setState({ value: value})
    }

   remove() {
      let { value } = this.state

      value--

      this.setState({ value: value})
   }
    // arrow function
    someFuncion = () => {
     this.setState({ value: 0})
    }
}

Engineer 6 年前

使用粗箭头 this
就你而言,

state = {
   value: 0
}

add = () => {
   let { value } = this.state

   value++

   this.setState({ value: value})
}

remove = ()=> {
   let { value } = this.state

   value--

   this.setState({ value: value})
}

render() {
   return(
      <Child add={this.add} remove={this.remove} />
   )
}

推荐文章

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

7 月前

Facundo Cabrera · 意外的应用程序错误!useNavigate()只能在<Router>组件的上下文中使用

7 月前

user29295031 · 如何使用react和vite覆盖Tailwinds css 4默认设计

7 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

7 月前

Luckkks · 过渡色工作不正常

7 月前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

7 月前

vatsal chauhan · 即使在字体预加载时,文本加载也很慢

7 月前

hasratyan · Next.js 15 API路由-动态路由中的无效GET导出错误[id]

7 月前

noblerare · Vite错误-未定义导出(SSR)

7 月前

ProfessorFinesse · 在默认表单中完成帖子请求时,“res.send”会去哪里?

7 月前