反应访问状态[重复]答案

【问题标题】：React access state [duplicate]反应访问状态[重复]
【发布时间】：2018-11-13 22:36:20
【问题描述】：

您好，现在正在尝试学习 React，但仍处于起步阶段。我在 codepen 中编写了下面的代码（请参阅底部的链接），在我的代码中，我将一些日志放在控制台语句中?

我认为它无法访问它，因为我可以打印到 'let current_todos = this.state.todos' 上方的控制台文本，但我从未在控制台文本中看到它的下方。

如果这是不正确的，那么我应该如何访问状态？注意：我意识到该函数中的许多代码是多余的，但我声明了这些变量和日志语句以用于调试目的

class TodoApp extends React.Component {
  constructor(props) {
    super(props)
    this.state = { 
      todos : [ ] 
    }
  }
  render() {
    return (
      <div className='todo-comp todo-app'>
        <h2>ToDo App</h2>
        <form onSubmit={this.handleSubmit}>
          <input type="text">
          </input>
        </form>
        <TodoList todos={this.state.todos}/>
       </div>
    )
  }
  handleSubmit(event) {
    let new_todo = event.target.children[0].value
    console.log("Submited: ".concat(new_todo))
    let current_todos = this.state.todos
    console.log("Succesfully accessed state")
    this.setState({"todos" : this.state.todos.push(new_todo)})
  }
}

class TodoList extends React.Component {
  constructor(props) {
    super(props)
  }
  render () {
    return (
      <ul className="todo-comp todo-list">
      {this.props.todos.map(
          function(item,key) {
            return(
              <li key={key} className="todo-comp todo-item">{item}</li>
            )
      })}
    </ul>
    )
  }
}

ReactDOM.render(
  <TodoApp />,
  document.getElementById('app'),
  console.log("App has been rendered"))

My CodePen Link

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

调用 this.handleSubmit 时，应添加 .bind(this)，因为调用时上下文不同。另一种选择是在构造函数中添加以下行：

this.handleSubmit = this.handleSubmit.bind(this)

【讨论】：

除此之外，如果你把函数写成箭头函数，默认会被视为有绑定：handleSubmit = (event) => { .... }
哇，我知道这很简单，你也让我明白了为什么我总是在构造函数中看到那些绑定。所以换句话说，我的功能是在错误的环境中寻找“这个”？
TSLint 不建议在渲染方法中使用箭头函数，所以我个人避免使用它。是的，你被绑定到了错误的 this，它没有“状态”属性。

【解决方案2】：

第一个错误是您的handleSubmit 将在每次渲染时重新创建。

此代码将允许您查看输入值并提交等。希望这对您有所帮助，如果您有任何问题，请在下方评论。

class TodoApp extends React.Component {
  constructor(props) {
    super(props)
    this.handleSubmit = this.handleSubmit.bind(this)
    this.onChange= this.onChange.bind(this)
    this.state = { 
      todos : [ ] 
    }
  }

  onChange(event) {
    this.setState({ text: e.target.value })
  }

  handleSubmit(event) {
    const { text } = this.state;
    // Your submit value;
    console.log(text)
  }
  render() {
    return (
      <div className='todo-comp todo-app'>
        <h2>ToDo App</h2>
        <form onSubmit={this.handleSubmit}>
          <input type="text" onChange={this.onChange}>
          </input>
        </form>
        <TodoList todos={this.state.todos}/>
       </div>
    )
  }
}

【讨论】：