Распространение нотации в функции рендеринга React.js и области видимости переменных

Question

У меня есть компонент реагирования, который определен с использованием нотации класса es6.В функции рендеринга я пытаюсь передать некоторые переменные состояния в подкомпонент, используя расширенную нотацию:

  render() {
    return (
      // <div>{console.log(this.state.data)}</div>
      <Table 
        {...{
          data,
          columns,
          infinite,
          debug: true
        }} 
      />
    );
  }

Это не сработало: data is not defined.Использование this.state.data и state.data также не работает (приводит к Unexpected keyword 'this' и Unexpected token).

Однако раскомментирование <div>{console.log(this.state.data)}</div> показывает, что состояние находится в области видимости.Наконец, это работает:

<Table data={this.state.data} columns={this.state.columns}/>

Я как-то неправильно использую нотацию спреда в этом случае?Я видел, как это работает в компонентах функции React.

Answer 1

Я думаю, что вы используете неправильные переменные. data действительно не определено. Вы фактические данные лежат в this.state.data

render() {
    return (
      // <div>{console.log(this.state.data)}</div>
      <Table 
        {...{
          data: this.state.data,
          columns: this.state.columns,
          infinite,
          debug: true
        }} 
      />
    );
  }

Не могли бы вы попробовать это?