私のreduxフォームの結果を同じコンポーネント内でレンダリングしようとしました

Question

私はreduxフォームを使用して、そのフィールド結果を持つAPIにヒットするアクションクリエータにフィールドを渡そうとしています。結果は同じコンポーネントに戻され、検索入力フィールドの下に表示されます。ここでは、ここで自分の行動の作成者

export function getStock({ticker_symbol}){ 

    console.log(ticker_symbol) 
    return function(dispatch) { 
     axios.get(`https://www.alphavantage.co/query?function=TIME_SERIES_INTRADAY&symbol=${ticker_symbol}&interval=1min&apikey=5QP2C2R2YCZ71HDB&datatype=json`, { 
      headers: { authorization: localStorage.getItem('token')} 
     }) 
      .then(res => { 
       console.log(res.data["Time Series (1min)"]) 
       dispatch({ 
        type: GET_STOCK, 
        payload: res.data 
       }) 
      }).catch(res => { 
       dispatch(authError(res.error)) 
      }); 

    } 
} 

あり、ここで減速

import { 
    FETCH_MESSAGE, 
    GET_STOCK 
} from '../actions/types'; 

export default function(state = {}, action){ 
    switch(action.type) { 
     case FETCH_MESSAGE: 
     return {...state, message: action.payload}; 
     case GET_STOCK: 
     return {...state, stock: action.payload, 
          stockDataLoaded: false}; 
    } 

    return state; 
} 

あるフォームを持っており、レンダリング情報を取得するために想定されるコンポーネントです。コンソールのログが正しいデータを取得しています。ここで

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 
import { reduxForm } from 'redux-form'; 
import * as actions from '../actions'; 

class Feature extends Component{ 
    componentWillMount(){ 
     this.props.fetchMessage(); 

    } 
    handleFormSubmit({ ticker_symbol }){ 
     console.log(ticker_symbol); 
     this.props.getStock({ticker_symbol}); 
    } 
    render(){ 
     const { handleSubmit, fields: { ticker_symbol }} = this.props; 
     return (
    <div> 
     <form onSubmit={ handleSubmit(this.handleFormSubmit.bind(this))}> 
      <fieldset className="form-group"> 
       <label> Ticker Symbol: </label> 
       <input {...ticker_symbol} className="form-control" /> 
      </fieldset> 
      <button action="submit" className="btn btn-primary"> Get Quote </button> 
     </form> 
     <h1></h1> 
    </div> 
     ); 
    } 
} 

function mapStateToProps(state){ 
    console.log(state); 
    return { message: state.stock.message, 
    stock: state.stock.stock}; 
} 

export default reduxForm({ 
    form: 'getstock', 
    fields: ['ticker_symbol'] 
}, mapStateToProps, actions)(Feature); 

は、私は結果がティッカーシンボルあなたのコメントへの対応

Answer 1

の下に表示させたいページ/コンソールのスクリーンショット

です。

状態に依存するコンポーネントは、ライフサイクルフックgetInitialStateを使用して状態属性を初期化する必要があります。

単に状態オブジェクトを初期化する場合は完全に空にしておくか、デフォルトの開始値で設定することができます。