bugfix> reactjs > 投稿

角度から反応する新しい エラーの受信:

The above error occurred in the <div> component: in div
Consider adding an error boundary to your tree to customize error handling behavior.

divとエラーが何を言っているのか、私にはよくわかりません。 行をクリックして、行から親に値を渡そうとしています。 最上位の親コンポーネントには、選択した行の値を設定する関数があり、子では、選択した行が小道具に渡されます。

親:

class Parent extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      activeItem: []
    }
    this.setActiveItem = this.setActiveItem.bind(this)
  }
  setActiveItem = userSelect => {
    this.setState({ activeItem: userSelect })
  }
render(){
     <Child activeItem={this.setActiveItem}/>
}

私の子供では、 onRowClicked を使用してag-gridを使用します 。エラーが this.props.setActiveItem(event.data) でスローされています

class Child extends React.Component {
    constructor(props) {
        super(props)
     }
    onRowClicked = event => {
        //eslint-disable-next-line no-console
        console.log('tester', event.data) //okay, shows data
        this.props.setActiveItem(event.data) //not okay, throws error
      }
    grid = () => {
        return (
          <AgGridReact
            columnDefs={this.state.columnDefs}
            rowData={this.state.data}
            onRowClicked={this.onRowClicked}
          />
        )
      }
    render() {
        if (this.state.data.length > 0) {
          return <div className="ag-mod">{this.grid()}</div>
        }
        return <br />
      }
}
    //also here's the prop for child
    Child.propTypes = {
      setActiveItem: PropTypes.func
    }

回答 1 件
  • setActiveItemを親から子にactiveItemとして渡します。

    <Child activeItem={this.setActiveItem}/>
    
    

    そのため、子では、それを渡すときに指定した名前で呼び出します。

    onRowClicked = event => {
        //eslint-disable-next-line no-console
        console.log('tester', event.data) //okay, shows data
        this.props.activeItem(event.data) //not okay, throws error
      }
    
    

    また、前述のエラーのように、コンポーネントをエラー境界でラップすることを検討してください。助けになる。あなたはそれについてここで読むことができます

あなたの答え