如何从包含函数的不同模块更新状态

Question

我有 2 个模块，曾经被称为 App，另一个是我创建可导出变量的模块，我希望它在其中一个可导出变量中更改 App 内部的状态。请给我建议，我将不胜感激。

import "./styles.css";
import {submit} from "./ex"

export default function App() {

  const [loading,notLoading] = ("false")

  return (
    <div className="App">
      <button onClick={submit}> click me </button>
    </div>
  );
}

// 可导出模块 ex.js

const objectFunc = (data) => {
  return dummy(data)
}


const dummy = (e) => {
  if(e === "k") {
      poster(e)
  } else {
      console.log("failed")
  }
}


const poster = (e) => {
  // need to update state from this function 
  console.log(e,"posted")
}


// submit function - called when submitted.
export const submit = (e) => {
  objectFunc("ek")
}

Answer 1

你可以传递一些设置状态的函数作为回调函数，类似于

const objectFunc = (data, callback) => {
  return dummy(data, callback);
};

const dummy = (e, callback) => {
  if (e === "k") {
    poster(e, callback);
  } else {
    console.log("failed");
  }
};

const poster = (e, callback) => {
  // need to update state from this function
  console.log(e, "posted");
  let somevalue = "value";
  callback(somevalue);
};

// submit function - called when submitted.
export const submit = (e, callback) => {
  objectFunc("ek", callback);
};

App.js

import { submit } from "./ex";
import { useState } from "react";

export default function App() {
  const [st1, setSt1] = useState(1);
  const setState1 = (value) => {
    setSt1(value);
  };

  return (
    <div className="App">
      <button onClick={(event) => submit(event, setState1)}> click me </button>
      <div>{st1}</div>
    </div>
  );
}

Answer 2

这里有一些问题，首先是 App 组件内部，我假设您打算将 useState 与一个名为 false 的变量一起使用，现在回答您的问题，它是不建议将非纯函数从组件中分离出来，因为它需要操纵状态，你可以把它放在应用程序组件中，但为了解决你的问题，看看这个新代码：

App.js

import "./styles.css";
import { submit } from "./ex";
import { useState } from "react";

export default function App() {
  const [loading, setLoading] = useState(false);

  return (
    <div className="App">
      <button onClick={(e) => submit(e, setLoading)}> click me </button>
      {loading && <div>loading</div>}
    </div>
  );
}

ex.js

const objectFunc = (data, setLoading) => {
  return dummy(data, setLoading);
};

const dummy = (e, setLoading) => {
  poster(e, setLoading);
  if (e === "k") {
  } else {
    console.log("failed");
  }
};

const poster = (e, setLoading) => {
  // need to update state from this function
  console.log(e, "posted");
  setTimeout(() => setLoading(false), 1000);
};

// submit function - called when submitted.
export const submit = (e, setLoading) => {
  setLoading(true);
  objectFunc("ek", setLoading);
};

我所做的是将回调函数传递给所有使用它的函数，同样，不建议这样做，但这应该可以解决您的问题

（p.s 刚刚添加了超时以显示加载变化）

Answer 3

global.js

const objectFunc = (data, setExample) => {
  return dummy(data, setExample);
};

const dummy = (e, setExample) => {
  if (e === "e") {
    poster(e, setExample);
  } else {
    setExample(false);
    console.log("failed");
  }
};

const poster = (e, setExample) => {
  console.log(e, "posted");
  setExample(true);
};

export const submit = (e, setExample) => {
  setExample(true);
  objectFunc("ek", setExample);
};

app.js

import { useState } from "react";
import { submit } from "./global";
import "./styles.css";

export default function App() {
  const [example, setExample] = useState(false);

  return (
    <div className="App">
      <button onClick={(e) => submit(e, setExample)}> click me </button>
      <div className="test">
        {example ? <span>Data is Here!!!!</span> : <span>No Data Show :(</span>}
      </div>
    </div>
  );
}

style.css

.test { margin-top: 1rem; }

希望对你有用:)

如何从包含函数的不同模块更新状态

How to update state from a different module containing a function

javascript

reactjs

next.js

state

global.js

app.js

style.css