내 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 라이프 사이클 후크를 사용하여 상태 속성을 초기화해야합니다.

getInitialState() { 
    return { 

    }; 
} 

상태 개체를 초기화하려는 경우 완전히 비워 두거나 기본 시작 값으로 채울 수 있습니다.