Как получить доступ к реквизиту в функциональных компонентах - PullRequest
Новая
       6

Как получить доступ к реквизиту в функциональных компонентах

0 голосов
/ 30 сентября 2018

У меня проблемы с компонентомКогда я использую реквизит, я получаю одинаковые данные во всех партнерах, но в GET_ODD данные действий отличаются1) Теперь, как я могу исправить эту проблему?2) как я могу установить интервал для нечетных изменений?if this.props.odd.ad_time < nextProps.odd.ad_time сменить нечетное в curenet реквизитах

данные json для каждого нечетного числа: {

"id": "24854545",
"home_od": "1.002",
"draw_od": "51.000",
"away_od": "51.000",
"ss": "3-1",
"time_str": "87",
"add_time": "1537706413"

}

редуктор: 

const initialState = {
    odd: {}
};

function Markets(state = initialState, action) {

  switch (action.type) {
    case GET_ODD:
            return {
                ...state,
               ...action.odd
            };
    default:
      return state;
  }
}

export default Markets

Действие на рынках: 

var marketsRESTRepository = new MarketsRESTRepository();

export const GET_ODD = "GET_ODD";
export function getOdd(odd) {
  return {
    type: GET_ODD,
    odd
  }
}



export function getAsyncOdd(eventId) {
  return function (dispatch) {
    marketsRESTRepository.getById(eventId).then(odd => {
      dispatch(getOdd({odd}));
    });
  }
}

Действие Нечетные данные те же результаты для шансов

Ответы [ 3 ]

0 голосов
/ 30 сентября 2018

в рыночном компоненте попробуйте это: 

import React, { Component } from "react";
import { connect } from 'react-redux';
import { getAsyncOdd } from "../../actions/markets.actions";

export class Markets extends Component {
  constructor(props) {
super(props); 
   this.state = {
       odds: {}
   };
}

componentDidMount(){
  this.props.getOdd(this.props.eventId);
  this.setState({this.props.odd})
}
componentWillRecieveProps(nextProps) {
  if(this.state.odds!==nextprops.odd){
      this.setState({odds: nextprops.odd})
  }
}

  render() {

return (
  <React.Fragment> 
    <span>{this.state.odds.home_od}</span>
    <span>{this.state.odds.draw_od}</span>
    <span>{this.state.odds.away_od}</span>
 </React.Fragment>
);
  }
}
function mapStateToProps({ markets }) {
  return {
   odd: markets.odd
  }
}
function mapDispatchToProps(dispatch) {
   return {
   getOdd: (eventId) => dispatch(getAsyncOdd(eventId))
  }
}

export default connect(mapStateToProps,
  mapDispatchToProps
)(Markets)
0 голосов
/ 01 октября 2018

У вас есть это: 

 dispatch(getOdd({odd}));

, и действие getOdd sync вернет этот объект: 

{
    type: "GET_ODD",
    odd: {
        odd: { /* data */}
    }
}

, который, в свою очередь, будет сброшен в состоянии редуктором с использованием спредаоператор.Я думаю, что вы должны изменить подход:

  1. сохранить действие getOdd как
  2. , когда вы вызываете getOdd, используйте его как getOdd(odd).Никаких фигурных скобок.

  3. в вашем редукторе, не используйте оператор распространения для действия.Используйте определенный ключ, например:

    return {... state, odd: action.odd}

  4. ваше асинхронное действие выглядит хорошо, просто добавьте в него уловкуи добавьте console.error, чтобы вы знали, если что-то не получается

Для вас 2 вопроса.Вы можете использовать один из методов жизненного цикла React, чтобы сравнить текущие и последующие поступающие реквизиты, а затем выполнить эту логику.

Надеюсь, это поможет!

0 голосов
/ 30 сентября 2018

Похоже, проблема в вашем редукторе,

Почему вы распространяете действие?Поскольку вы получаете к нему доступ таким образом, 

<span>{this.props.odd.home_od}</span>

Измените его на 

       return {
            ...state,
            add : action.odd
        };
...