React Native useEffect Hooks и React Navigation setParams не обновляется при загрузке - PullRequest
Новая
       34

React Native useEffect Hooks и React Navigation setParams не обновляется при загрузке

1 голос
/ 27 февраля 2020

Почему мои React Navigation setParams не обновляют данные на смонтированном компоненте? 

const NewScreen = props => {
  const [extraInfo, setExtraInfo] = useState({
    title: '',
    description: '',
  });
  const [mediaArray, setMediaArray] = useState(null);
  const [someData, setSomeData] = useState({});

  const grabData = useCallback(() => {
    return axios
      .get('url')
      .then(res => {
        /* does some data grabbing for setSomeData and setMediaArray */

        setSomeData({
          data1,
          data2,
          data3,
        });
        setMediaArray(media);
      })
      .catch(err => console.log('axios catch err', err));
  }, []);

  /* ... more data grabbing for extraInfo */

  useEffect(() => {
    grabData();
    props.navigation.setParams({
      mutate: props.mutate,
      title: extraInfo.title,
      description: extraInfo.description,
      newDataForAray: mediaArray,
      ...someData,
    });
  }, [grabData]);

  return (
    <KeyboardAvoidingView behavior="padding" style={styles.keyboardView}>
      ...
    </KeyboardAvoidingView>
  );
};

NewScreen.navigationOptions = props => {
  const {mutate, title, description, newDataForAray} = props.navigation.state.params;
  const handleSubmit = () => {
    mutate({
      variables: {
        title,
        description,
      },
    });
  };
  return {
    headerRight: () => (
      <TouchableOpacity
        onPress={() => handleSubmit()}
        style={{marginRight: 10}}>
        <Text>Done</Text>
      </TouchableOpacity>
    ),
  };
};

const mutation = gql`
  mutation someMutation(
    ...
  ) {
    ...
  }
`;

export default graphql(mutation)(withNavigation(NewScreen));

Итак, при загрузке я могу получить данные через axios. Но когда компонент монтируется, данные в prop.navigation.setParams не заполняются. Если я добавлю someData, mediaArray or extraInfo в массив обратного вызова useEffect, он будет бесконечно l oop, переопределяя мой компонент, но данные в navigation.state будут, наконец, заполнены.

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

1 Ответ

1 голос
/ 27 февраля 2020

С вашей текущей настройкой grabData будет извлекать ваши данные, но не будет обновлять sh someData, mediaArray, et c до следующего рендеринга. Но ваш следующий рендер не запустится, так как массив зависимостей вашего useEffect не сработает.

Вы можете использовать два useEffects, один из которых зарезервирован для grabData, а другой для props.nav. А еще лучше, обновить props.nav в grabData.

обновить, отражая комментарий

Медиа или некоторые данные не изменяются сразу. Таким образом, ссылаться на те же медиа или некоторые данные, которые ваш API-интерфейс перетаскивает, на ваши setParams 

 const grabData = useCallback(() =>
  axios
  .get('url')
  .then(res => {
    /* does some data grabbing for setSomeData and setMediaArray */

    const someData = {
      data1,
      data2,
      data3,
    };
    setSomeData(someData);
    setMediaArray(media);
    const paramsTest = {
       mutate: props.mutate,
       title: extraInfo.title,
       description: extraInfo.description,
       newDataForAray: media,
       ...someData,
     };
     console.log({ paramsTest }); // used to confirm values provided to nav
     props.navigation.setParams(paramsTest);
  })
  .catch(err => console.log('axios catch err', err)), [props.navigation.setParams]);
...