React PropTypes.arrayには文字列型のキーがあります

Question

Myコンポーネントには配列として定義されたプロパティがありますが、数字キーで値を反復できません。キーは文字列であるようです。 何か不足していますか？

class Test extends React.Component { 
    render() { 
     let parse = []; 
      for (let i in Object.keys(this.props.test)) { 
       parse.push(
        <div key={i}> 
         {i} {typeof i} {this.props.test[i]} 
        </div> 
       ) 
    } 
    return (
     <div> 
      {parse} 
     </div> 
    ) 
    } 
} 

Test.propTypes = { 
    test: React.PropTypes.array 
} 

ReactDOM.render(
    <Test test={["a", "b", "c"]} />, 
    document.getElementById('main') 
); 

プロパティテストのキーが文字列であることを示します。

this.props.test.map((el, i) => (
    <div key={i}> 
    {i} {typeof i} {el} 
    </div> 
)) 

非を使用して：あなたのケースで

Codepen Example

Answer 1

、あなただけのmap、forEachまたはクラシックfori < lengthループを使用し、数字キーを反復処理したい場合は、ここにmap例です数字キーは全く問題ありません。さらに、インデックスをキーとして使用することは良い考えではありません。例えば

あなたの配列をソートを変更または削除/始めや途中に要素を挿入し、反応することができる場合には、多くの不必要な操作を行うことができます（のアンマウント/再マウントして）

Answer 2

方が良いマップを呼び出すコードを整理することができますお使いのアレイ上の機能、

class Test extends React.Component { 
    render() { 
    const {test} = this.props; 

    return (
     <div> 
     {test.map((t, i) => 
      <div key = {i}>{i} {typeof i} {t}</div> 
     )} 
     </div> 
    ); 
    } 
} 

Test.propTypes = { 
    test: React.PropTypes.array 
}; 

ReactDOM.render(
    <Test test={["a", "b", "c"]} />, 
    document.getElementById('main') 
);