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中的数据最终将填充。

我希望能够将值传递到导航状态，以便可以在标题中使用它

Answer 1

[使用当前设置，grabData将提取您的数据，但在下一次渲染之前不会刷新someData，mediaArray等。但是，由于useEffect的依赖项数组不会触发，因此下一个渲染将不会运行。

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

---

更新反映评论

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