Использование eval () с внешней функцией приводит к ошибке «функция не определена» в React - PullRequest
Новая
       28

Использование eval () с внешней функцией приводит к ошибке «функция не определена» в React

0 голосов
/ 15 апреля 2020

У меня есть компонент React, который перебирает массив (как показано ниже), используя .map, и записывает содержимое на экран.

myArray 

myArray = [
"'I ate'",
"'chicken'",
"getDate(Date.parse(allAnswers['dateUpdateFailed']))"
]

Пример вывода 

I ate chicken yesterday

Ниже показано, как я добился этого с помощью своего рабочего компонента:

Оригинальный рабочий код 

import React from 'react';
import {isYesterday, format} from 'date-fns';

const NLG = ({ watchAll }) => {

    const allAnswers = JSON.parse(watchAll);

        /*Convert date to language*/
        const getDate = (date) => { 
            if (isYesterday(date) === true) {
                return 'yesterday';
            }
            else {
                return 'on ' + format(date, 'EEEE');
            }
         };

  return (
      <p>
        {myArray.map((n) => eval(n) + ' ')}
      </p>
  );
};
export default NLG;

Где все пошло не так!

Я хочу переместить getDate () и внешний js файл, чтобы код был модульным. Теперь я получаю getDate не определено ошибка.

Мой текущий нерабочий код выглядит так:

Внешний getDate. js

import { isYesterday, format } from 'date-fns';

const getDate = (date) => {
  if (isYesterday(date) === true) {
    return 'yesterday';
  } else {
    return 'on ' + format(date, 'EEEE');
  }
}

export default getDate;

Новый компонент, ссылающийся на внешнюю функцию getDate 

import React from 'react';
import getDate from './getDate.js'; // Assuming they're both in the same directory

const NLG = ({ watchAll }) => {
  const allAnswers = JSON.parse(watchAll);
  return (
    <p>
      {myArray.map((n) => eval(n) + ' ')}
    </p>
  );
};

export default NLG;

Может кто-нибудь объяснить, почему это работало раньше, но теперь, когда я переместил свою функцию в внешний файл это терпит неудачу так жалко ?!

Эксперименты

Я также попробовал следующее, которые отлично работают:

  • вызов внешней функции getDate () напрямую из моего компонента а не из массива.
  • извлечение getDate () из массива и перенос в eval (), когда функция находится внутри основного компонента, а не во внешнем файле.

Это просто когда я ОБА беру функцию из массива И использую внешнюю функцию getDate (), что она завершается ошибкой.

Очень растерян! Любая помощь будет очень признателен!

Большое спасибо,

Kat ie

...