React Native useEffect Hooks 和 React Navigation setParams 不会在加载时更新

Question

为什么我的 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 回调的数组中，它将无限循环，重新渲染我的组件，但最终会填充 navigation.state 中的数据。

我希望能够将值传递到导航状态，以便我可以在 header

中使用它

Answer 1

根据您当前的设置，grabData 将提取您的数据，但不会刷新 someData、mediaArray 等，直到下一次渲染。但是，你的下一个渲染不会运行因为你的 useEffect 的依赖数组不会触发。

您可以使用两个 useEffects，其中一个保留给 grabData，另一个保留给 props.nav。更好的是，在 grabData.

内更新 props.nav

更新反映评论

媒体或某些数据值不会立即更改。因此，将您的 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]);

React Native useEffect Hooks 和 React Navigation setParams 不会在加载时更新

React Native useEffect Hooks and React Navigation setParams doesn't update on loading

reactjs

react-native

react-native-navigation

react-hooks

use-effect