React：在使用数组更新状态后未定义。

Question

我正在尝试用React编写一个数独生成器。这是我的动作创建者，它将生成我的数独的二维数组。

export const FETCH_FIELD = 'FETCH_FIELD';

export function complitedSudoku() {
  const field = [[0,1,3],[2,4,6]];

  return {
    type: FETCH_FIELD,
    payload: field
  }
}

这是我的容器。他显示了数独场。从动作创建者我的容器获取单元格的值并更新容器的状态。

import { complitedSudoku } from '../actions/index';

class SudokuField extends Component {

  constructor(props) {
    super(props);
    this.state = { rowsAndCols: 0 };
    this.generateSudoku = this.generateSudoku.bind(this);
  }

  generateSudoku() {
    this.setState({rowsAndCols: this.props.complitedSudoku().payload})
  }

  render() {
    return (
      <div>
        <table border="1" width="50%">
          <tbody>
            <tr>
              <th>{ this.state.rowsAndCols[0] }</th> // undefined
            </tr>
          </tbody>
        </table>
      <button onClick={ this.generateSudoku } type='submit' className='btn btn-secondary'>Generate Sudoku</button>
      </div>
    );
  }
}

当我试图指定数组的具体值（this.state.rowsAndCols [0] [1]）时，我总是得到未定义的数组值。