通过 props 将状态值传递给子组件

IT技术 javascript reactjs react-redux
2021-05-06 05:06:48

我正在尝试将用户输入的值从 app 组件传递到 passTicket 组件。我尝试调用 props 来传递这个状态数据，但是在尝试访问它时我不断收到未定义的错误。我是新手，如果有人能帮助我理解我的错误，那就太好了。这是我要实现的目标的示例。这是我的主要组成部分：

class App extends Component {

  constructor(props){
    super(props);
    this.state = {
      ticket:"",
    };
    this.changeTicket = this.changeTicket.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.keyPress = this.keyPress.bind(this);
  }

  changeTicket(e){
    this.setState({
      ticket : e.target.value,
    })
  }

  handleSubmit(){
    this.setState({
      updatedTicket: this.state.ticket
    });
  }

  keyPress(e){
    if (e.keyCode ===13){
      this.handleSubmit();
    }
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <input type="text" placeholder="ENTER TICKET NUMBER" value={this.state.ticket} onKeyDown={this.keyPress} onChange={this.changeTicket}/>
        </header>
      </div>
    );
  }
}

我希望能够将 updatedTicket 值存储在我可以在 PassTicket 组件中使用的变量中。这是我到目前为止所尝试的，但它发生的错误如下Uncaught TypeError: Cannot read property 'updatedTicket' of undefined

这是我的第二个组件的样子：

class PassTicket extends Component {

  transferredTicket(){
    const myTicket = this.props.state.updatedTicket;
    return myTicket
  }

  render() {
    return (
        <p>{this.transferredTicket()}</p>
    );
  }
}
2个回答

当将属性从父组件传递给子组件时，该属性将按其传​​递的名称存储到 props 中。例如：

class Parent extends Component {
  state = {
     ticket: '',
  }

  render() {
    return <ChildComponent updatedTicket={this.state.ticket} />
  }
}


class ChildComponent extends Component {
  static propTypes = {
     updatedTicket: PropTypes.string,
  }

  static defaultProps = {
     updatedTicket: '',
  }

  render() {
    return (
      <div>{this.props.updatedTicket}</div>
    );
  }

}

在你给的例子，它看起来像你传递的状态下到组件，您要访问它没有。此外，它好像你正在试图访问updatedTicket的的属性一个state对象，所以请注意你如何访问你的props。

因此，为了访问updatedTicket子组件上的属性，您首先需要导入PassTicket组件，在父 ( App) 组件中实例化它，然后向下传递属性：

<PassTicket updateTicket={this.state.ticket} />

然后您就可以PassTicket像这样访问组件中的字符串-this.props.updateTicket

所以.state在 react 中是一个局部状态，它只对单个组件可见。您可以在此处阅读更多相关信息：https : //reactjs.org/docs/state-and-lifecycle.html

为了传递你的状态，你需要使用props系统。因此，在实例化组件的地方，您可以传入父组件的状态。例如：

<PassTicket ticket={this.state.updatedTicket}/>

然后在PassTicket渲染函数中，您可以访问票证props：

render() {
  const { ticket } = this.props
  return (
    <div>{ticket}</div>
  )
}
其它你可能感兴趣的问题
上一篇从流式音频功能更新 useState 时无限重新渲染 下一篇使用 Shopify Admin API 创建产品