React Hooks: ссылка на данные, которые хранятся внутри контекста, изнутри useEffect () - PullRequest
Новая
       76

React Hooks: ссылка на данные, которые хранятся внутри контекста, изнутри useEffect ()

0 голосов
/ 19 марта 2020

У меня есть большой JSON большой двоичный объект, хранящийся в моем контексте, который я затем могу сделать ссылкой на использование jsonpath (https://www.npmjs.com/package/jsonpath)

Как бы я go мог получить доступ к контексту изнутри useEffect (), не добавляя мою контекстную переменную в качестве зависимости (контекст обновляется в других местах приложения)? 

export default function JsonRpc({ task, dispatch }) {
  const { data } = useContext(DataContext);
  const [fetchData, setFetchData] = useState(null);

  useEffect(() => {
    task.keys.forEach(key => {
      let val = jp.query(data, key.key)[0];
      jp.value(task.payload, key.result_key, val);
    });
    let newPayload = {
      jsonrpc: "2.0",
      method: "call",
      params: task.payload,
      id: "1"
    };

    const domain = process.env.REACT_APP_WF_SERVER;
    let params = {};
    if (task.method === "GET") {
      params = newPayload;
    }
    const domain_params =
      JSON.parse(localStorage.getItem("domain_params")) || [];
    domain_params.forEach(e => {
      if (e.domain === domain) {
        params[e.param] = e.value;
      }
    });
    setFetchData({ ...task, payload: newPayload, params: params });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [task]);

}

Ответы [ 2 ]

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

спасибо за ваш ответ @Jolly! Я нашел обходной путь:

Я переместил поиск данных в начальное вычисление состояния: 

const [fetchData] = useState(processFetchData(task, data));

, затем я просто проверяю, что я очищаю компонент после вызова ax ios сделано путем выполнения полной функции, переданной компоненту от его родителя.

Пока это работает, но если у вас есть какие-либо другие предложения, я бы хотел их услышать!

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

Мне нужно опубликовать ответ из-за кода, но я не на 100% уверен в том, что вам нужно, поэтому я построю правильный ответ с вашими отзывами:)

Итак, Моя первая идея: ты не можешь разделить свои эффекты на две React.useEffect? Примерно так: 

export default function JsonRpc({ task, dispatch }) {
  ...

  useEffect(() => {
    ...
    setFetchData(...);
  }, [task]);


  useEffect(() => {
    ...
  }, [data]);

   .. 
}

Теперь, если мое понимание верно, это пример временной шкалы событий:

  1. Из-за обновления на task вы запустите первый useEffect, который может setFetchData();
  2. Из-за обновления на fetchData и AX IOS сделан вызов, который обновляет data (свойство в контексте);
  3. При этом вы вводите второй useEffect, где у вас есть обновленный data, но NO вызов setFetchData(), таким образом, без цикла;

Затем, если вы хотите (но не можете) поместить data в массив зависимостей вашего useEffect, я могу представить, что два useEffect, которые я написал, имеют некоторый общий код: вы можете написать общий метод, вызываемый обоими useEffect s, НО важно, чтобы вызов setFetchData() находился за пределами этого распространенного метода.

Дайте мне знать, если вам нужна дополнительная проработка.

...