如何防止useEffect()第一次啟動但監聽狀態變化？

我正在使用反應，節點快遞，postgres

我有一個反應組件，它是一個從 postgres 表填充的 html 表。

這是父組件材料：

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() 在第一次渲染時啟動，但如果厚度 1/寬度1/長度 1 的狀態發生變化，那么它應該啟動并重新渲染，非常感謝！

uj5u.com熱心網友回復：

You're over-complicating this. All you need to do is set the state values:

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);
  }
}

You don't need to manually do anything to re-render the component. It will re-render whenever state is updated. So the "setter" functions being invoked here will trigger that re-render. (All of the state updates will be batched. So the above won't trigger 5 re-renders, just one with the 5 updated state values.)

Where you would use useEffect is when you want to have some logic which responds to a change in a particular state. For example, if you want to show a message every time thickness changes to a negative value, you'd do something like:

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

But that's not what you're doing here. All you're doing here is setting state values.

標籤：javascript 反应 使用效果 使用状态

上一篇：React，如何添加外部腳本并使其功能可用？

下一篇：即使它們具有相同的字串，bcryptcompareSync也會回傳false