從 index.js 導出變量並將其導入另一個 class - react.js

Question

我正在嘗試在另一個 class util.js 中使用我的索引中的變量。 在 index.js 的構造函數中，我將兩個變量設置為 0，然后使用this.setState({ startTime: Date.now() })和this.setState({ endTime: Date.now() }) 。 我看到一個建議使用export const difference = true; 在我的 class 上方的 index.js 上，然后在 render() 之后，有const difference = this.state.endTime - this.state.startTime; 在返回（）之前。 從那里我想將它導入到我的 util.js 中，這樣我就可以將它放在我的數據庫中。

實用程序.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
    })
}

應用程序.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;

這樣做會給我兩個錯誤：UnhandledPromiseRejectionWarning 和 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 (
    ...
    )
  }
}

我的主要問題是，如何從我在構造函數中設置的主要 class 導出變量，然后將其導入另一個 class，然后從那里將其放入數據庫？

Answer 1

我認為您無法導出該變量。 最好將該變量作為道具傳遞或將其保存到 redux 中。

Answer 2

export是頂級的，這意味着您不能從塊內導出。 您也無法重新初始化const ，因此您閱讀的建議不起作用。 您可以將其初始化為index.js頂部的export let difference ，然后在您的渲染中 function, difference = this.state.endTime - this.state.startTime 但是以這種方式傳遞 class 組件 state 非常尷尬。 一個好的解決方案是考慮使用 Redux 或 React.Context。 這將允許您存儲difference ，然后將其提取到您調用App.js的addName中。

Answer 3

雖然您嘗試做的事情是可能的，但它會出現錯誤且難以維護。

在 React 中，所有數據都應該作為 props 傳遞。 這保證了組件將被正確更新並相應地重新渲染。 訪問普通的共享變量將在渲染周期之外，並可能導致問題或意外結果。

在 react 中有兩種方法可以做到這一點：道具傳遞和上下文。 上下文可能不是這里的正確工具。 上下文通常用於防止道具鑽探（即，將道具從頂部組件向下傳遞到幾個不同的組件）或者如果有多個具有特定值的消費者。 請參閱此處的注意事項。

在這種情況下，您可以相當簡單地傳遞它，我建議將 function 傳遞給 StopWatch class （在您的示例中為 Home）

---

使用道具

應用程序.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;

秒表.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 (...)
  }
}

注意：您還必須修改addName function 以接受差異作為參數。