React和d3在react組件中導入數據-無法讀取未定義的屬性'length'

Question

我已經在我的應用程序中實現了這個圖表示例

看到有關其組成的圖像

問題是，如果我的nums數據像這樣的const nums = [32, 19, 47, 38, 17, 62, 94, 21, 59, 62];硬編碼，我只能顯示我的圖表正確地填充有數據const nums = [32, 19, 47, 38, 17, 62, 94, 21, 59, 62];

導出默認類ChartsGrid擴展React.Component {

  render() {

    const view = [480, 320];
    const trbl = [0, 0, 0, 0]
    const horizontalAxisHeight = 30;
    const verticalAxisWidth = 42;
    const nums = [32, 19, 47, 38, 17, 62, 94, 21, 59, 62];

    return (
      <div className="grid">
          <LineChart {...{view, trbl, nums, horizontalAxisHeight, verticalAxisWidth}} />
      </div>
    )
  }
};

如果我將我的數據聲明為props const { nums } = this.props; 在我的ChartsGrid組件中，然后在LineChart組件中得到此錯誤

TypeError：無法讀取未定義的屬性“ length”

這是怎么一回事，因為它是在抱怨nums在渲染功能LineChart

const {view, trbl, nums, horizontalAxisHeight, verticalAxisWidth} = this.props;

我的nums數據實際上是在商店中消耗的（我可以在控制台中看到它）

num.js

const nums = [32, 19, 47, 38, 17, 62, 94, 21, 59, 62];

export default nums;

reducer.js

import { combineReducers } from 'redux';
import { routerReducer } from 'react-router-redux';

import nums from './nums';

const rootReducer = combineReducers({nums, routing: routerReducer });

export default rootReducer;

商店

import rootReducer from './reducers/index';
const store = createStore(rootReducer);

export default store;

這是存儲數據num.js的邏輯

那么為什么LineChart無法讀取它們？

Answer 1

您可以分配一個空數組來避免此問題，如下所示

const nums  = this.props.nums || [];

您應該檢查為什么此屬性首先為null或未定義。 在分配道具的部分中一定有一些邏輯錯誤。