react：初期状態値が定義されていません

Question

私の状態に初期値を設定しようとしています。私はconstructorを使用していくつかの値を自分の状態に移しました。

import React,{Component} from 'react'; 

export default class RandomWords extends Component{ 
    constructor(props){ 
    super(props); 
    const str="Italy quake: Norcia tremor destroys ancient buildings"; 
    const words = str.split(" "); 
    this.state= { 
     activeWord:0, 
     activeLetter:0, 
     words:words 
    }; 
    } 
     render(){ 
     console.log("words are:"+this.props.words); 
      return(<div> 
       { this.props.words } 
      </div>) 
     } 
} 

、その後、私はpropsにstateを接続するためにmapStateToPropsを使用しました。ここではコンテナがある：あなたが私のrender()機能で、見たよう

import RandomWords from '../components/RandomWords'; 
import {connect} from 'react-redux'; 

function mapStateToProps(state){ 

    return ({words:state.words, 
      activeLetter:state.activeLetter, 
      activeWord:state.activeWord}); 
} 

export default connect(mapStateToProps)(RandomWords); 

、私はconsole.log("words are:"+this.props.Words);を持っていると私は分割さ言葉を見ることを期待しています。 コンソールにはundefined

Answer 1

mapStateToPropsがあります。Redux stateを店舗からコンポーネントの小道具にマッピングするために使用します。

ただし、component stateを初期化しています。 2つの異なる概念。あなたはthis.stateを経由してコンポーネントの状態にアクセスすることができます！

render(){ 
    console.log("words are:" + this.state.words); 
    return(<div> 
     {this.state.words} 
    </div>) 
    }