Question

我是ReactJS的新手，我遇到了将数组从一个类传递到另一个类的问题

这是我的语法：

class Application extends React.Component{
  constructor(){
    super()
    this.state = {
      data: []
    }
  }  
  method_one(){
    var array = ["one","two"]
    this.state =array
  }
  render() {
    return(

    <div>{this.method_one()}

        {console.log(this.state.data)}
        <AppTwo content={this.state.data}/>
      </div>

    )
  }
}
class AppTwo extends React.Component{
  render(){

    return<div> {console.log(this.props.content)}</div>
  }
}

ReactDOM.render(<Application />,document.getElementById("main"))

console.log（）返回undefined。你能帮我弄清楚我错过了什么吗？

Answer 1

你的错误是你试图改变组件的状态并且循环发生，因为你经常调用方法。试试这段代码：

class Application extends React.Component{
 constructor(){
  super()
  this.state = {
   data: []
  }

  this.method_one = this.method_one.bind(this); //get class context to this method
 }  
 method_one(){
  var array = ["one","two"]
  this.setState({ data: array });
 }
 render() {
  return(
   <div onClick={this.method_one}> //do not call this metod constantly you just need to indicate it

    {console.log(this.state.data)}
    <AppTwo content={this.state.data}/>
   </div>

  )
 }
}

class AppTwo extends React.Component{
 render(){

  return<div> {console.log(this.props.content)}</div>
 }
}

ReactDOM.render(<Application />,document.getElementById("main"))

抱歉我的英文:)希望对你有所帮助。

在尝试将数组传递给类时，我得到了未定义

1 个答案: