我有一个自定义的React钩子，该钩子返回一个函数。我需要将该函数传递给普通javascript对象才能使用。
以下代码旨在解决的问题是，JavaScript对象add_action('rest_api_init', function() {
register_rest_route('wl/v1', 'pages', [
'methods' => 'GET',
'callback' => 'wl_page',
]);
});
function wl_page() {
$args = [
'numberposts' => 99999,
'post_type' => 'page',
'post_parent' => 0,
];
$posts = get_posts($args);
$data = [];
$data['ID'] = $posts[0]->ID;
$data['title'] = $posts[0]->post_title;
$data['content'] = $posts[0]->post_content;
$data['featured_image'] = get_post_thumbnail_id( $posts[0]->ID );
return $data;
}
始终具有LetterFoundation函数的版本，该版本知道最新的字母，同时仍然引用了其他地方的基础在组件中（例如，在另一个addLetter中）。
下面的代码 的问题是，useEffect()每次更改时，letters也会更改，因此重新创建了基础。我正在尝试找到一种仅创建基础的方法。
addLetter如果您删除import React, {useState, useEffect, useCallback} from 'react'
function useLetters() {
const [letters, setLetters] = useState([])
const addLetter = useCallback(
letter => {
if (letters.includes(letter)) return
setLetters(l => [...l, letter])
},
[letters, setLetters],
)
return {letters, addLetter}
}
function LetterDisplay() {
const {letters, addLetter} = useLetters()
const [foundation, setFoundation] = useState(null)
useEffect(() => {
const adapter = {addLetter}
const foundation = new LetterFoundation(adapter)
setFoundation(foundation)
}, [addLetter])
useEffect(
() => foundation.doSomething(props.doSomething),
[props.doSomething]
)
return (
<>
<div>{letters}</div>
<SomeOtherComponent onEvent={addLetter} />
</>
)
}
周围的useCallback包装器，则会创建一个无限循环的渲染，因为addLetter会在每次渲染时发生变化，并且由于创建基础的效果（并将其设置为状态）也将在以前的渲染中运行。由于设置了这种状态，因此在重复出现问题的地方会导致另一个渲染。
您可以通过删除基础创建对addLetter的依赖来解决此问题，但是基础将总是 具有addLetter的版本，该版本已词法上捕获了初始状态没有字母（addLetter）！
如何更改挂钩或组件，以便仅一次创建基础？