从 index.js 导出变量并将其导入另一个 class - react.js

Question

I am trying to use a variable from my index in another class, util.js. In my constructor in index.js, i set two variables to 0 and then use this.setState({ startTime: Date.now() }) and this.setState({ endTime: Date.now() }) . I saw a recommendation to use export const difference = true; on index.js above my class and then after render(), have const difference = this.state.endTime - this.state.startTime; before return (). From there I want to import it into my util.js so I can place it in my database.

util.js:

import "isomorphic-fetch"
import { difference } from "../pages/index.js";

export function addName(name) {
    return fetch('http://localhost:3001/addtime', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ name, time: difference }) // getting errors with this
    })
}

App.js

import React from 'react';
import { addName } from "./util";

function App() {
  const [name, setName] = React.useState("")

  function handleUpdate(evt) {
    setName(evt.target.value);
  }

  async function handleAddName(evt) {
    await addName(name);
  }

  return <div>
    <p><input type='text' value={name} onChange={handleUpdate} /></p>
    <button className='button-style' onClick={handleAddName}>Add Name</button>
  </div>
}

export default App;

Doing this is giving me two errors: UnhandledPromiseRejectionWarning and DeprecationWarning. index.js:

export const difference = true;

export default class Home extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
         startTime: 0,
         endTime: 0,
    };
   }
  handleStart = () => {
    ...
    this.setState({
      startTime: Date.now()
    })
    ...
  }
  handleStop = () => {
    ...
    this.setState({
      endTime: Date.now()
    })
    ...
  }

  render() {
    const difference = this.state.endTime - this.state.startTime;
    return (
    ...
    )
  }
}

My main question, how can i export a variable from my main class that I'm setting in my constructor, then import it into another class, and from there place it into a database?

Answer 1

I think you can't export that variable. It is better to pass that variable as props or save it into redux.

Answer 2

export is top-level, meaning you can't export from within a block. You also can't reinitialize a const , so the suggestion you read would not work. You could initialize it as an export let difference at the top of your index.js , and then in your render function, difference = this.state.endTime - this.state.startTime . But passing around class component state this way is pretty awkward. A good solution for you would be to look into using either Redux or React.Context. That would allow you to store difference and then pull it out in your App.js where you call addName .

Answer 3

While what you are trying to do is possible, it will be buggy and difficult to maintain.

In React, all data should be passed around as props. This guarantees that components will be updated correctly and re-renders occur accordingly. Accessing plain, shared variables will be outside of the render cycle and can cause problems or unexpected results.

There are 2 ways of doing this in react: Prop passing and Context. Context is probably not the right tool here. Context is typically used to prevent prop drilling (ie passing props from the top component down through several different components) or if there are several consumers of a certain value. See the caveats here .

In this case, where you can pass it fairly simply, I would suggest passing a function down to the StopWatch class (Home in your example)

---

Use Props

App.js

import React from 'react';
import StopWatch from './StopWatch';
import { addName } from "./util";

function App() {
  const [name, setName] = React.useState("")
  const [duration, setDuration] = React.useState(0)

  function handleUpdate(evt) {
    setName(evt.target.value);
  }

  async function handleAddName(evt) {
    await addName(name, duration);
  }

  return <div>
    <StopWatch onStop={(d) => setDuration(d)} />
    <p><input type='text' value={name} onChange={handleUpdate} /></p>
    <button className='button-style' onClick={handleAddName}>Add Name</button>
  </div>
}

export default App;

StopWatch.js

export default class StopWatch extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
         startTime: 0,
    };
   }
  handleStart = () => {
    ...
    this.setState({
      startTime: Date.now()
    })
    ...
  }
  handleStop = () => {
    const difference = Date.now() - this.state.startTime;
    this.props.onStop(difference);
    ...
  }

  render() {
    return (...)
  }
}

Note : You will also have to modify the addName function to accept the difference as a parameter.