Stati c значение в качестве входного сигнала - PullRequest
Новая
       4

Stati c значение в качестве входного сигнала

4 голосов
/ 09 января 2020

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

Для упрощения, предположим, что это мои настройки: 

class SomeService {
  static data;

  // can be called by other components (asynchronous)
  static fetchData = async () => {
    data = await someAsynchronousCall() // data gets a new value
  };
}

const HomeScreen = () => {
  useEffect(() => {
    console.log('new data is: ' + SomeService.data);
  }, [SomeService.data]); // I want to trigger this once data changes

  return <View> ... </View>
};

Я пробовал что-то подобное, но когда data меняется, useEffect не вызывается.

Есть ли способ получить желаемое поведение?

Ответы [ 3 ]

4 голосов
/ 09 января 2020

useEffect прослушивает обновление состояния. SomeService.data является переменной c. Вы должны реализовать что-то подобное, используя Hooks. 

const HomeScreen = () => {
  const [data, setData] = useState();
  //Stand for componentDidMount (empty array dependancies)
  useEffect(()=>{
    setData(new SomeService());
  },[])
  useEffect(() => {
    console.log('new data is: ' + data);
  }, [data]); // I want to trigger this once data changes

  return <View> ... </View>
};
0 голосов
/ 09 января 2020

Вы можете использовать контекстный API, чтобы отделить логи извлечения c от вашего компонента. 

import React from 'react'
const DataContext = React.createContext()

function DataProvider({children}) {
  const [data, setData] = React.useState()
  React.useEffect(() => {
    const fetchData = async () => {
      const data = await someAsynchronousCall()
      setData(data)
    };
    fetchData()
  }, [])
  return (
    <DataContext.Provider value={data}>
        {children}
    </CountStateContext.Provider>
  )
}
export {DataProvider, DataContext}

В вашем компоненте используйте useContext, чтобы получить данные 

const HomeScreen = () => {
  const data = useContext(DataContext)
  useEffect(() => {
    console.log('new data is: ' + SomeService.data);
  }, [data]); // I want to trigger this once data changes

  return <View> ... </View>
};

и обернуть ваше приложение в DataProvider 

const App = props => {
<DataProvider>
  <HomeScreen />
  {/* other component */}
</DataProvider>
}
0 голосов
/ 09 января 2020

useEffect запускается после каждого рендера по умолчанию (если второго параметра нет). И второй параметр useEffect предназначен для проверки, должен ли он быть перезапущен или нет, НЕ запускает useEffect для запуска .

В вашем случае ваш static data может изменить, но нет ничего, что заставляет ваш компонент повторно выполнить рендеринг, так что ваша функция useEffect не будет работать.

Вы можете сделать ваши данные как состояние , чтобы они были повторно обработаны , Или как-то запускать рендеринг всякий раз, когда изменяются ваши данные c.

...