Reactjs React props功能未定义

我在父组件中定义了一个函数。我将函数传递给子组件。调用子组件中的函数时，出现错误：

TypeError:updateModifiers不是一个函数

记录

typeof

显示函数在第一次渲染时定义，然后在接下来的两次渲染中变为未定义：

function
undefined
undefined

为什么

updateModifiers

会被覆盖？我不知道发生了什么事

const乘积=({
...
}) => {
...
const updateModifiers=（modifierId，选项）=>{
...
}
返回(
...
...
)
}
导出默认产品
const ProductModifiers=（{current，updateModifiers}）=>{
log（“父”，UpdateModifier的类型）
if（Object.keys（current.modifiers）.length==0）
返回空
返回(
{Object.values（current.modifiers）.sort（（a，b）=>a.order-b.order）.map（（modifier，i）=>
)}
)
}
const ProductModifier=（{modifier，updateModifiers}）=>{
log（“child”、modifier.name、updateModifiers的类型）
...
useffect（（）=>{
console.log（updateModifiers的类型）//未定义->未定义
//updateModifiers（modifier.name，选项）
}，[选项]）
返回(
...
)
}

更新：（如果有帮助）

ProductModifiers

中的

Object.values（current.modifiers）

有两个元素。对于第一个元素，函数定义得很好。第二，不是

parent function
child Toppings function
child Toppings function
child Sides undefined
child Sides undefined
parent function
child Toppings function
child Toppings function
child Sides undefined
child Sides undefined

为什么在第二个渲染组件中未定义

updateModifiers

更新2：

---

发现了问题。与我在其他地方的代码相关。尽管如此，问这个问题还是帮助我调试了！；-）

您的问题来自组件didmount和组件diddupdate逻辑。事实上，在装入组件后会立即调用componentDidMount（），但是当组件发生更改时，您应该处理componentDidUpdate（）逻辑

要同时处理componentDidMount和componentDidUpdate，请在ProductModifier组件中尝试以下操作：

    const ProductModifier = ({ modifier, updateModifiers }) => {
    const mounted = useRef();
    ...

    useEffect(() => {
    if (!mounted.current) {
      // do componentDidMount logic
      mounted.current = true;
    } else {
      // do componentDidUpdate logic
    }
  });

    return (
        ...
    )
}

---

您是否尝试删除抽屉组件以检查它是否不会对ProductModifiers带来一些副作用？

您不应该像这样传递UpdateModifier，如果它确实起作用，则可能会导致应用程序永远循环。我会使用

useContext

来处理类似的问题。您能使用沙盒提供一个可复制的问题吗？@PrateekThapa这不是相同的代码，但它遵循相同的模式：。然而，在那个沙箱中，它是有效的。所以我希望有人在过去也遇到过同样的问题…@nzajt我认为useContext是一个过火的解决方案。为什么你会期待一个循环？目前没有循环。@Binajmen您的代码中存在一些问题，以及如何实现它。上面的代码看起来没问题。是否创建一个可复制的问题？？我正在使用useffect（…[var]）来处理装载和更新事件。我看不出它对我当前的问题有什么帮助..使用

更改会直接抛出错误：（我只是不明白为什么在第一次渲染时定义函数，然后在

ProductModifiers

中变得未定义…如果我放置

console.log（type of updateModifiers）

我在控制台中有一次

函数

。在

ProductModifier

中，函数->未定义->未定义。最后两个渲染以某种方式覆盖了某些内容…您能否仔细检查抽屉是否没有任何副作用？我尝试了与您类似的设置，并且类型似乎正确显示：