Question

我有一个状态为const [objects, setObjects] = useState([]);

的对象数组

我有一个添加按钮，用于将对象添加到数组，这是onclick事件的主体：

setObjects([...objects, { id: 20, property1: value1 }]);

我有一个删除按钮，用于从数组中删除对象，这是onclick事件的主体：

const newObjects = objects.filter(object => { return object.id !== idToRemove; // idToRemove comes from the onclick event }); setObjects(newObjects);

现在，如果对象已从状态中删除，我想对状态进行更新。

问题是我必须等到状态更新后，才删除状态。我不想监听每个状态更改。

这是我到目前为止所拥有的：

useEffect(() => { //execute a function that uses the updated state }, [objects.length]);

但是如果将对象添加到状态中，也会触发这种情况。

简而言之：当对象从对象数组中删除并且状态完成更新时，我想做些事情

我想用钩子做到这一点。

谢谢！

Answer 1

您可以编写自己的钩子，也可以添加其他一些变量来保持数组的长度，并可以用来检查元素是否被删除或添加。

function woocommerce_dropdown_variation_attribute_options_html( $html, $args ) {
    $variation['image']['thumb_src'] = "https://i.picsum.photos/id/230/50/50.jpg";
    $html = '<img src="' . esc_attr($variation['image']['thumb_src']) . '">';
    $html.= '<img src="' . esc_attr($variation['image']['thumb_src']) . '">';
    return $html;
}
add_filter( 'woocommerce_dropdown_variation_attribute_options_html', 'woocommerce_dropdown_variation_attribute_options_html', 10, 2 );

等待状态更新useState挂钩

1 个答案: