我怎样才能防止 useEffect() 第一次启动但监听状态变化？

Question

我正在使用 React、Node Express、Postgres

我有一个反应组件，它是一个 html table，它是从 postgres table.

填充的

这是父组件材质：

const Materials = () => {
    const [thickness1, setThickness] = useState(0);
    const [width1, setWidth] = useState(0);
    const [length1, setLength] = useState(0);
    const [partTotalDemand, setTotalDemand] = useState(0);
    const [partPlanned, setPlanned] = useState(0);
...

这是组件中检索数据的方法

// Material requirements calculation
    const getReq = async (id) => {
        try {
            const response = await fetch(`http://localhost:5000/materials/${id}`, [id])
            const jsonData = await response.json();

            const tempThickness = jsonData.parts_material_thickness
            const tempWidth = jsonData.parts_material_width
            const tempLength = jsonData.parts_material_length
            const tempTotalDemand = jsonData.workorder_total
            const tempPlanned = jsonData.parts_produced

            stateSetter(tempThickness, tempWidth, tempLength)
        } catch (err) {
            console.log(err.message);
        }
    }

然后我想更新全局常量的状态：

const stateSetter = (thickness, width, length) => {
        try {
            setThickness(thickness);
            setWidth(width);
            setLength(length);

            console.log(thickness1);
            console.log(width1);
            console.log(length1);

        } catch (err) {
            console.log(err.message)
        }
    }

    useEffect(() => {
        stateSetter();
    }, [thickness1]);

基本上 getReq() 方法应该检索信息，然后我需要用这些值更新状态。据我了解，然后我需要重新渲染组件以便新状态可用。我试图通过 useEffect() 来做到这一点，但我没有成功。想法是阻止 getReq() 在第一次渲染时启动，但如果 thickness1/width1/length1 的状态发生变化，那么它应该启动并重新渲染，非常感谢！

Answer 1

你是over-complicating这个。您需要做的就是设置状态值：

const getReq = async (id) => {
  try {
    const response = await fetch(`http://localhost:5000/materials/${id}`, [id])
    const jsonData = await response.json();

    // set state values
    setThickness(jsonData.parts_material_thickness);
    setWidth(jsonData.parts_material_width);
    setLength(jsonData.parts_material_length);
    setTotalDemand(jsonData.workorder_total);
    setPlanned(jsonData.parts_produced);
  } catch (err) {
    console.log(err.message);
  }
}

您无需手动对 re-render 组件执行任何操作。每当状态更新时，它都会 re-render 。因此，此处调用的“setter”函数将触发 re-render。（所有状态更新都将被分批处理。所以上面不会触发 5 re-renders，只会触发 5 个更新状态值。）

当你想要一些逻辑来响应特定状态的变化时，你会使用 useEffect。例如，如果您想在每次 thickness 变为负值时显示一条消息，您可以执行以下操作：

useEffect(() => {
  if (thickness < 1) {
    alert('negative thickness!');
  }
}, [thickness]);

但这不是你在这里做的。 您在这里所做的一切 是设置状态值。

我怎样才能防止 useEffect() 第一次启动但监听状态变化？

How can i prevent useEffect() from firing up the first time but listening for a state change?

javascript

reactjs

use-effect

use-state