将值传递给react挂接

tkclm6bt 于 2022-12-14 发布在 React

关注(0)|答案(2)|浏览(132)

得到了一个组件，它使用一个单独的挂钩创建，但我无法传递任何值给该挂钩，我需要在我的用例。

const onEdit = (index: number) => useMediaLinkImage(img => {

        setNodeImages(imgData => {

            imgData[index] = {
                ...imgData[index],
                image: {
                    ...imgData[index].image,
                    image: img
                }
            }

            return imgData
        })
    })

返回--------------

{
            nodeImages.map(({ image, mode }, index) => <Image
                    key={index}
                    mode={mode}
                    image={image}
                    onEmpty={onEmpty}
                    onChange={onValueChange}
                    onSubmit={onSubmit}
                    onToggle={onToggle}
                    onEdit={() => onEdit(index)}
                    onAdd={addImage}
                />)
            }

无法获取将其用作函数以获取onEdit引发错误的索引

React Hook "useMediaLinkImage" is called in function "onEdit" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use".

react-native

来源：https://stackoverflow.com/questions/74730400/pass-a-value-to-a-react-hook

2条答案

按热度按时间

n53p2ov01#

它期望onEdit是应该返回JSX element或null或undefined的组件，但您返回了useMediaLinkImage挂钩，因为使用此arrow function语法(index: number) => useMediaLinkImage，它是

(index: number) => {
  return useMediaLinkImage((img) => {
     // code ..
  })
}

您只需要使用不带return的括号。

const onEdit = (index: number) => {
   useMediaLinkImage(img => {

        setNodeImages(imgData => {

            imgData[index] = {
                ...imgData[index],
                image: {
                    ...imgData[index].image,
                    image: img
                }
            }

            return imgData
        })
    })
}

赞(0）回复(0）举报 2022-12-14

yqlxgs2m2#

您可以只在其他钩子内调用钩子，或者在React组件的主体内调用钩子。
在你的例子中，你必须 return 你想从钩子本身调用的函数：

function useMediaLinkImage(...) {
    // set your custom state here
    function update(index, ...) {
        ...
    }
    return {
        ... // return state variables from here if needed
        update
    };
}

然后在组件中：

const { update } = useMediaLinkImage(...);

const onEdit = (index: number) => {
  update(index, ...);
}

赞(0）回复(0）举报 2022-12-14

我来回答

将值传递给react挂接

2条答案

相关问题

热门标签

最新问答