如何将 state 从一个组件传递到另一个组件，这些组件由 stacknavigator 在本机反应中加入？

Question

Let's say I have two components, A and B that are joined together by the stack navigator that are being rendered in App.js. Now in AI have declared some state variables and also in BI have declared some state variables. I want to use the state variables I declared in A in B. And then use all the state variables of A and B together to test an api endpoint.

For eg: Componenet A:

...
const A = () => {
  const [projectName, setProjectName] = useState("");
  const [projectDescription, setProjectDescription] = useState("");
  const [projectBudget, setProjectBudget] = useState(null);
  const [projectDuration, setProjectDuration] = useState(null);
  const [industry, setIndustry] = useState("");
  const [companyName, setCompanyName] = useState("");
  const [numberOfEmployees, setNumberOfEmployees] = useState(null);

  return (
   ...
  );
}

...

  ...
  const B = () => {

  var newDiamond = [
  { newCriteria: { novelty: "", technology: "", complexity: "", pace: "" } },
  ];
  ...
  const [techVal, setTechVal] = useState("");
  const [noveltyVal, setNoveltyVal] = useState("");
  const [complexityVal, setComplexityVal] = useState("");
  const [paceVal, setPaceVal] = useState("");

  return (
   ...
    newDiamond[0].newCriteria.technology = techVal;
   ...
    newDiamond[0].newCriteria.novelty = noveltyVal;
   ...
    newDiamond[0].newCriteria.complexity = complexityVal;
   ...
    newDiamond[0].newCriteria.pace = paceVal;
   ...
   //Need to initiate an HTTP request here by using state variables of both A and B components:
   axios.post('/projects', {projectName, projectDescription, projectBudget, projectDuration, industry, companyName, numberOfEmployees, newDiamond});
  //newDiamond that is initialized in B uses state variables of B, is used in the request.
   ...
  );
}
...

How can I pass state from A to B? I don't think there is a parent-child relationship between them so I don't think I can pass props b/w them.

Answer 1

You should consider using React Context API https://uk.reactjs.org/docs/context.html . Its dedicated to sharing the common state ( items in your case). Here is an example: You should create a common context for items: ItemsState.js

import React, { useState, useContext } from 'react';

const ItemsContext = React.createContext([]);

export const ItemsProvider = ({ children }) => {
  return (
    <ItemsContext.Provider value={useState([])}>
      {children}
    </ItemsContext.Provider>
  );
}

export const useItems = () => useContext(ItemsContext);

Then share the context between screens with provider in App.js like this

import {ItemsProvider} from 'ItemsState';

function App() {
  return (
   <ItemsProvider> // share the items between both screens
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Add" component={AddScreen} />
      </Stack.Navigator>
    </NavigationContainer>
   </ItemsProvider>
  );
}

Then use items context in each screen like this AddScreen.js

import {useItems} from './ItemsState';

function AddScreen({ route, navigation }) {
  const [items, setItems] = useItems(); // <- using items context as global useState
  const [itemName, setItemName] = React.useState('');
  const [itemPrice, setItemPrice] = React.useState('0');

  const addItem = () => {
    setItems([...items, { itemName, itemPrice }]);
    setItemName('');
    setItemPrice('0');
  };

  return (
    <View>
      <TextInput
        multiline
        placeholder="What's on your mind?"
        value={itemName}
        onChangeText={setItemName}
      />
      <TextInput
        multiline
        placeholder="What's on your mind?"
        value={itemPrice}
        onChangeText={setItemPrice}
      />
      <Button
        title="Done"
        onPress={() => {
          addItem();
          // Pass params back to home screen
          navigation.navigate('Home', items);
        }}
      />
    </View>
  );
}

You can also use useReducer hook and make more Redux-like. Check out this article https://medium.com/simply/state-management-with-react-hooks-and-context-api-at-10-lines-of-code-baf6be8302c