尝试让我的 redux 表单结果在同一个组件中呈现

Posted 2023-02-22

【中文标题】尝试让我的 redux 表单结果在同一个组件中呈现

【英文标题】：Trying get my redux form results to render within the same component

【发布时间】：2018-02-28 20:05:45

【问题描述】：

我正在尝试使用 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);

这是页面/控制台的屏幕截图

我希望结果显示在股票代码下方

【问题讨论】：

这一切看起来都很好，你有什么问题？

每次我尝试将 state.state.stock 放入组件中的空

【参考方案1】：

回复您的评论；

任何依赖其状态的组件都需要使用getInitialState生命周期钩子来初始化状态属性；

getInitialState() 
    return 

    ;

如果您只想初始化状态对象，可以将其完全留空，也可以使用默认起始值​​填充它。

【讨论】：

``` componentWillMount() this.props.fetchMessage(); ```我是把get initial state放在组件会挂载的上面，还是在里面呢？我折腾了一下，还是搞不定。

getInitialState 是一个生命周期钩子。它应该以与 componentWillMount 相同的方式应用于组件（这是另一个生命周期挂钩）。是在其他钩子的上方还是下方无关紧要，但绝对不在里面。

对不起，我的意思是替换 willmount 不在 willmount 内。当我控制台 state.stock.stock 的 mapStateToProps() 时，我得到了我正在寻找的对象。在提交表单之前，该项目未定义或不存在。我是否应该将其置于初始状态并将其设置为空？我不确定我应该在里面放什么。

只需将其设置为 null 就足够了。