javascript - React 状态数组添加值

标签 javascript reactjs

我确信这是显而易见的事情,然后我会觉得很傻,但我在这里错过了什么?我有类似的东西:

export default class Questions extends Component {

  state = {
    questions: [{value: 'one'}, {value: 'two'}]
  };

  addQuestion = (question) => {
    let questions= this.state.questions
    let newQuestions = [...questions, {value: question}]
    this.setState({
      questions: newQuestions
    })
  };

  render() {
    return (
      <div>
        {this.state.questions.map((question, index) => <p key={index}>{question.value}</p>)}
        <button onClick={this.addQuestion.bind('three')}>Add</button>
      </div>
    )
  }

}

初始状态值显示正常,但是当我单击“添加”时,我从 React 收到一个很长的错误,内容如下:

Uncaught Error: Invariant Violation: Objects are not valid as a React child...

那么,我在这里错过了什么?

最佳答案

最有可能应该是:

{this.addQuestion.bind(this, 'three')}

否则,您将无法在 addQuestion 中访问 this.state:

let questions= this.state.questions

关于javascript - React 状态数组添加值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36417821/

相关文章:

javascript - 使 hover resize 元素只影响元素

javascript - XMLHttpRequest 在 $.ajax 工作的地方给出 CORS 错误

reactjs - 使用导入类型时出现意外 token

javascript - d3 - 使用 React 的单击事件由于质心坐标而响应缓慢

javascript - React.js 从函数返回样式属性并在 render() 函数中使用它

javascript - SharedWorkers 可以使用其他共享工作人员的全局变量吗?

javascript - 如何在查询之间进行 Sequelize $?

javascript - react 路由器 BrowserRouter 与 typescript react 的问题?

reactjs - Redux 默默地不渲染 connect()ed 组件

javascript - 如何正确绑定(bind)到 AngularJS 中的服务属性?