反應PropTypes - 形狀與數字作爲鍵

我想爲我的React組件之一指定PropTypes並且遇到了一些問題。我想描述的對象將看起來像這樣（數組將包含多個對象）：反應PropTypes - 形狀與數字作爲鍵

rounds: { 
    1: [ 
     { 
     date: 1429354800000, 
     arena: 'Arena name', 
     scoreHome: 3, 
     scoreAway: 2, 
     teamHome: 'Home team name', 
     teamAway: 'Away team name', 
     spectators: 10 
     } 
    ] 
}

我不會事先知道有多少輪會有。所以，我可以結束了

rounds: { 1: [..], 2: [..], 3: [..] }

這是我現在有（不工作）：

RoundsTable.propTypes = { 
    rounds: PropTypes.shape({ 
    PropTypes.arrayOf(PropTypes.shape({ 
     date: PropTypes.number.isRequired, 
     arena: PropTypes.string.isRequired, 
     scoreHome: PropTypes.number.isRequired, 
     scoreAway: PropTypes.number.isRequired, 
     teamHome: PropTypes.string.isRequired, 
     teamAway: PropTypes.string.isRequired, 
     spectators: PropTypes.number.isRequired 
    }).isRequired).isRequired 
    }).isRequired 
}

我不知道如何來指定包含對象的數組數。這是我的一個數據設計問題還是有一個簡單的解決方案來指定這些類型的道具？

來源

2016-02-12 jollelj

是否有一個原因，你使用的是帶有編號鍵的對象，而不是數組？ –

這是一個數據設計問題。您正在使用Object作爲數組。例如，如果你相應地改變你的數據，這將工作：

RoundsTable.propTypes = { 
    rounds: PropTypes.arrayOf(PropTypes.shape({ 
     date: PropTypes.number.isRequired, 
     arena: PropTypes.string.isRequired, 
     scoreHome: PropTypes.number.isRequired, 
     scoreAway: PropTypes.number.isRequired, 
     teamHome: PropTypes.string.isRequired, 
     teamAway: PropTypes.string.isRequired, 
     spectators: PropTypes.number.isRequired 
    }).isRequired).isRequired 
}

的數據是這樣的：

rounds: [ 
     { 
     date: 1429354800000, 
     arena: 'Arena name', 
     scoreHome: 3, 
     scoreAway: 2, 
     teamHome: 'Home team name', 
     teamAway: 'Away team name', 
     spectators: 10 
     }, 
     {...} 
]

你失去的指標，但陣列已經有這些。如果您想要更多類似地圖的功能，您需要決定使用哪種地圖並將PropTypes作爲其基礎。 Javascript沒有原生地圖，儘管人們經常使用Object來達到同樣的目的，但有一些限制，比如你碰到的那個。

來源

2016-02-12 09:04:45 EugeneZ

這解決了我的問題。仍然好奇它是否可以使用PropTypes來描述我的初始結構。謝謝。 – jollelj

你的初始結構的問題是你沒有正確使用'{}'。這是一個對象字面值，而不是地圖，並且您將它用作地圖。你應該做的測試是：我可以提前定義所有的密鑰嗎？如果沒有，那麼你需要一個數組或地圖（例如ES6'Map'類）。在你的情況下，輪次數沒有限制，所以你不能使用Object文字。你這樣做的原因可能是因爲你有時看到代碼「濫用」Javascript對象作爲地圖喜歡，因爲它們非常靈活。那有意義嗎？ – EugeneZ

這不是一個好的答案。並非所有的整數都是索引。我遇到了同樣的問題，我的密鑰可能是：126,8654,65683。這不是數組，而是字典密鑰 – DeGoltz

反應PropTypes - 形狀與數字作爲鍵

回答

相關問題