Node и React не синхронизированы - PullRequest
Новая
       28

Node и React не синхронизированы

0 голосов
/ 09 мая 2018

Мне удалось добиться следующего -> Когда пользователь нажимает на конкретную дату в компоненте A, данные отправляются на узел (Sails API), где выполняются все необходимые вычисления, и до того, как компонент B будет отображен правильноданные готовы к отображению.

Проблема заключается в том, что когда пользователь возвращается из компонента B в компонент A и выбирает другую дату, он / она получает точно такой же результат (старое значение), потому что даже если новыйзначение отправляется бэкэнд-API, узел не выполняет пересчеты с новым значением.

Я могу достичь правильного результата только после того, как вручную обновлю страницу или внесу изменения на сервере, чтобыэто вызывает пересчет.

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

Я бы рассмотрел какой-то тип автоматического обновления,анимированная загрузка, все что угодно.Ага, воткнулся: /

Можно ли вообще их синхронизировать?

ОБНОВЛЕНИЕ -> Вот код:

BACKEND 

getDetails: (req, res) => {
    authentication.authenticate().then((auth) => {
      const sheets = google.sheets('v4');
      sheets.spreadsheets.values.get({
        auth: auth,
        spreadsheetId: config.spreadsheetSettings.spreadsheetId, // id of spreadsheet
        range: config.spreadsheetSettings.employeeSheetId, // name of employee spreadsheet and range- get all cells
      }, (err, response) => {
        if (err) {
          res.serverError(err);
          return;
        }
        const rows = response.values; // response-all cells
        const updatedData = employeeService.mapEmployeeSheetToJson(rows);

         // FETCHING THE VALUE FROM REST API
        let myArr = [];

        (function() {

                    axios.get(`http://localhost:1337/api/`)
                    .then(res =>  {
                    let kajmak = res.data.slice(-1)[0]
                    let test = kajmak[Object.keys(kajmak)[0]]
                    myArr.push(test)
                    }).catch(err => console.error(err));
             })();

        // MAPING OVER THE ARRY AND DOING THE LOGIC
        setTimeout(() => {
            myArr.map(xo => {

        const result = [];

    updatedData.forEach(emp => {//  2013     2012  2014
        if (xo > parseInt(moment(emp.startdate).format('YYYYMM'), 10) &&
          (xo < parseInt(moment(emp.enddate).format('YYYYMM'), 10))) {
              result.push(emp);
          }
      });

      // IF THEY STARTED WORKING BEFORE THE SELECTED DATE AND STILL WORKING
    updatedData.forEach(emp => { // 2013   > 2012 & 2013   -
          if (xo > parseInt(moment(emp.startdate).format('YYYYMM'), 10) && 
              ((parseInt(moment(emp.enddate).format('YYYYMM'), 10) == undefined ))) {
                  result.push(emp);
          }
      });

      // IF THEY STARTED WORKIG BEFORE THE SELECTED DATE,
      // BUT STOPPED WORKING BEFORE THE SELECTED DATE
    updatedData.forEach(emp => {  // 2013  <    2014 ||     2013  > 2017
          if (xo < parseInt(moment(emp.startdate).format('YYYYMM'), 10) &&
              (xo > parseInt(moment(emp.startdate).format('YYYYMM'), 10))) {
                  result.pop(emp);
          }
      });

        // Getting the names to use for unique sheet req
        let finalResult = [];
        result.map(x => {
            finalResult.push((x.name + ' ' + x.surname))
        })

        if (rows.length === 0) {
          res.err('No data found.');
        } else {
          res.ok(finalResult);
        }
    }) 
        }, 1000);
    });

}

FRONTEND 

getEmployeeSalaryData = () => {
            // GETTING THE CLICKED VALUE FROM THE PREVIOUS COMPONENT
            const { year } = this.props.history.location.state.item;
            const { month } = this.props.history.location.state.item;
            const selectedMonth = moment().month(month).format("MM");
            const finalSelect = parseInt(year + selectedMonth, 10);
            const { employees } = this.props;
            // I'M RECIEVING THIS AS PROPS USING REDUX AND THIS IS THE ACTUAL 'FINAL' DATA USED FOR FURTHER CALCS AND RENDERING
            const { details } = this.props;

             // HERE I'M SENDING THE 'CLICKED' VALUE FROM THE PREVIOUS COMPONENT TO THE BACKEND API
            axios.post(`http://localhost:1337/api/`, { 'test' : finalSelect })
                .then(res => {
                console.log('Data send')
                // console.log(res.data);
              }).catch(err => console.error(err));



            // Making the req 
            details.map(x => {

                EmployeeApi.getEmployee(x)
                    .then(y => {
                        //Making sure everything is in the right order
                        let test = Object.assign(y.data);
                        let ii = x;

                    setTimeout(
                        this.setState(prevState => ({
                            ...prevState.currentEmployee,
                            fullNames: [...prevState.currentEmployee.fullNames, ii]
                        })), 100);

                let onlyRelevantDate = [];
                test.map(item => {
                    if (finalSelect == parseInt(item.year + moment().month(item.month).format("MM"), 10)) {
                            onlyRelevantDate.push(item)
                        }})
                            this.setState(prevState => ({
                            currentEmployee: {
                            ...prevState.currentEmployee,
                            salaryInfo: [...prevState.currentEmployee.salaryInfo, onlyRelevantDate],
                            fullNames: [...prevState.currentEmployee.fullNames, ii]
                    }}))         
                })
            });
        }   
        componentWillReceiveProps(nextProps) {
            this.getEmployeeSalaryData(nextProps);
        }

        componentWillMount() {
            this.getEmployeeSalaryData(this.props);
        }

Ответы [ 2 ]

0 голосов
/ 09 мая 2018

вы можете использовать RxJS для решения этой проблемы

0 голосов
/ 09 мая 2018

В компоненте A вы должны отправить действие, которое является функцией, выполняющей функцию отправки. 

//some click handler for when user makes a selection
//  the function should be in action creator file but you get the jist
const handleSomeClick = someValue =>
  //when you dispatch an action that is a function in redux with thunk then
  //  the thunk middleware will not call next (no reducers will be called)
  //  thunk will pass a parameter to this function that is the dispatch
  //  function so from your function you can dispatch actual object action(s)
  dispatch(
    dispatch=>
      setTimeout(
        dispatch({type:"changedValue",data:someValue}),//dispatching the action
        someValue*1000//assuming someValue is a number
      )
  )

Здесь - это пример, в котором компонент A установлен someValue в зависимости от того, какая кнопка нажата, и выделит эту кнопку, он также установит someValue из B асинхронно. Это делается в функции changeLater, которая отправляет действие, являющееся функцией, так что thunk выполнит его вместе с диспетчеризацией.

Эта функция отправляет действие по истечении времени ожидания. Если щелкнуть цифры 5, а затем 1 (быстро), вы увидите, что подсвеченная кнопка A и значение после асинхронного B не совпадают (выделенное A - 1, а значение после асинхронного B - 5).

Это связано с тем, что порядок, в котором пользователь щелкает и запускает асинхронный процесс, не совпадает с порядком разрешения асинхронного процесса. Вы можете решить эту проблему, отправив действие только в том случае, если это последнее решенное обещание.

В этом примере показано, как это делается с помощью обещания, созданного later, и разрешите его, только если оно является последним, с использованием частично примененной версии onlyLastRequestedPromise, называемой lastNumberClicked

...