Передача данных ag-grid от дочернего к родительскому

Новинка реагирует на угловой Получение ошибки:

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}/>
}

В моем ребенке я использую ag-grid с помощью onRowClicked. Ошибка возникает в this.props.setActiveItem(event.data)

class Child extends React.Component {
    constructor(props) {
        super(props)
     }
    onRowClicked = event => {
        //eslint-disable-next-line no-console
        console.info('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
    }

Все еще смотрю на ваш код, но я заметил, что вы привязываете метод setActiveItem к родительскому элементу. Поскольку этот метод создается с использованием стрелочной функции es6, вам не нужно выполнять this.setActiveItem = this.setActiveItem.bind (this) в родительском конструкторе. Попробуйте удалить это.

Danstan 27.06.2018 21:35
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
1
1 255
1

Ответы 1

Вы передаете setActiveItem от родителя к дочернему как activeItem.

<Child activeItem = {this.setActiveItem}/>

Поэтому в детстве назовите его тем именем, которое вы дали при передаче.

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

Кроме того, подумайте о том, чтобы заключить ваши компоненты в границу ошибки, как указано в ошибке. Помогает. Вы можете прочитать об этом здесь

Другие вопросы по теме