如何在单独的 .js 文件上的 React 应用程序中共享变量？

Question

I have a series of forms that should build on one another, without having to ask the same questions over again. This is analogous to session variables in PHP.

I looked into props, state, effect, and the styles library but nothing seems to work.

Also note: I have all my create react app one one js file (as a class.extends..., not an arrow function const), my functions on another js file, and my UI on yet another js file all in the main directory.

Does everything have to be in the App.js file or is there a way to modify central variables from the functions ie (App.firstName = this.fname) or similar to state:

const reluctantVariableNameToAvoidErrors () => setState( App.firstName : fname );

This seems to not throw errors but is unreadable by a separate export const function.

This is the starting form where it takes info and calls a query (this works):

export const home = (props) => (
    <div className="App">
        <div className="App-header">
            <img src={"./dgsl.png"} width={"400px"} alt="logo" />
            <br/><h2>Welcome</h2><br/>
            <Input id="oldtele" className="w-25" placeholder="Existing Telephone">t</Input><br/>
            <Button onClick={() => queryGuest(document.getElementById("oldtele").value)}>I am a Returning Visitor</Button><br/>
            <Link href={"./enroll"}  onlyActiveOnIndex>I am a new Guest</Link>
        </div>
    </div>
);

That calls this function sending the info as a prop or parameter (i'm not sure):

export function queryGuest(ot) {
    const telRef = db.collection("guests");
    const that = this;
    const query = telRef.where("telephone", "==", ot)
        .get()
        .then(function (querySnapshot) {
            querySnapshot.forEach(function (doc) {
                // doc.data() is never undefined for query doc snapshots
                console.log(doc.id, " => ", doc.data());
                const fnameR = doc.get("fname");
                const lnameR = doc.get("lname");
                const teleR = doc.get("telephone");
                const employR = doc.get("employer");
                const lictypR = doc.get("licType");
                const licnoR = doc.get("licNo");
                    alert(fnameR + " " + lnameR + " found in system.");
                        let set = () => this.setState({fname: fnameR});
                        set = () => this.setState({lname: lnameR});
                        set = () => this.setState({tele: teleR});
                        set = () => this.setState({employ:employR});
                        set = () => this.setState({licTyp:lictypR});
                        set = () => this.setState({licNo:licnoR});
                questions(fnameR);
                window.location.href = "./questions";

            })
        });
}

Should change the variables here in App:

import { home, newguest, thankyou, questions } from './pages';

class App extends React.Component {
    constructor(props) {
        super(props);

        const [state, setState] = useState({
            fname: "na",
            lname: "na",
            tele: "na",
            employ: "na",
            resid: "na",
            room: "na",
            reason: "na",
            instr: "na",
            nextvis: "na",
            nodays: "na",
            cov: "na",
            lictype: "na",
            licno: "00"
        });

    }

        render() {
            return (
                <Router history={browserHistory}>
                    <Route path="/" component={home}/>
                    <Route path="/enroll" component={newguest}/>
                    <Route path="/thanks" component={thankyou}/>
                    <Route path="/questions" component={questions}/>
                </Router>
            );
        }
    }

And then be retrievable later here without needing to be re-entered and passes as a parameter:

export function addVisit() {
    //disburses all state variables to the visits table in db
    db.collection("visits").add({
        date: Date.now.toString(),
        guestfname: this.state.fname,
        guestlname: this.state.lname,
        telephone: this.state.tele
    }).then(r => r => window.location.href = "./thanks");
}

So is there some special library i need, or do i need to do mount lifecycles or should i just try to design it to be very one-way so they have to enter everything on the same page and send it all from function to function?

Furthermore, should it be set up so that the functions are attached to the rendered UI as a return()? I like having them separate but everything i see online has them attached.

Thanks!

Answer 1

to start off you are using useState in a class component. You can't do that, hooks are meant for function components, a class component has this.state and this.setstate . For sharing state across multiple files you probably want to look into the context API . you would define your state in the app and pass that state the value of a Context.Provider which you have as a parent for all the other components. within the function components, you can access the state by using the useContext hook

Answer 2

So it turned out there were a few solutions, the simplest being useState.

This was done by instantiating the state in App.js and then passing the state variable and it's alteration function to each of the components that need it. Those functions in turn make the calls back to their source.

EXAMPLE:

const App = () => {
const [cars, setCars] = useState({object or array});

return(
   <Router>
    <Route path='/make'><makeCars carslist={cars} changecars={setCars}/>{</Route>
    <Route path='/viewonly'><viewCars carslist={cars}/></Route>
   </Router>
)
}

And then in the other function where you want to access it:

export const makeCars = ({ changeCars, carslist }) => {
//make the 'cars' object in App.js become equal to "corvette"
changeCars("corvette");
}