WordPressブロック開発にて<SelectControl>コンポーネントを複数選択にしたい

Question

前提

WordPressのブロック開発を行っています
WordPressはバージョン 5.9.2
開発環境となる npm は　8.1.2
node.jsのバージョンv16.13.1
MAMPでローカル環境を構築しプラグインとしてカスタムブロックを追加して開発を行っています

実現したいこと

投稿の情報を取得して<select>コンポーネントで複数選択可能なブロックを作成する。

発生している問題

<SelectControl>コンポーネントで value プロパティを配列として渡せません
valueがうまく受け取れないので当然クリックしても反応しません（データは取れている）

投稿データを取得してセレクトタグとしてレンダリングするところまではうまくいきました。
高階コンポーネントとして withSelect を使用し投稿データを「posts」として受け取っています。
高階コンポーネントを別ファイルに記述し、<SelectControl>を含むコンポーネントでマージしています
エラーなどは出ていません

該当のソースコード

posts-select.js

import { withSelect } from '@wordpress/data';
import { SelectControl } from "@wordpress/components";

const PostsSelect = (props) => {
	const { posts, selectedPostId, selectPost } = props;

	//SelectControl の options プロパティに指定する投稿のタイトルとIDから成るオブジェクトの配列
	let select_options = [];
	if (posts) {
		select_options.push({ value: 0, label: "投稿を選択", disabled: true });
		posts.forEach((post) => {
			select_options.push({ value: post.id, label: post.title.rendered });
		});
	} else {
		select_options.push({ value: 0, label: "読み込み中", disabled: true });
	}

	return (
		<SelectControl
			id="oja_posts_select"
			label="投稿セレクトメニュー"
			multiple
			options={select_options}
			value={ selectedPostId.filter((value) => select_options.includes(value)) }
			// value={[3528, 3305, 3342]}
			onChange={selectPost}
		/>
	);
};;

export default withSelect((select, props) => {
	//現在の投稿の post ID を取得
	const currentPostId  = select("core/editor").getCurrentPostId(),
        curentPostType = select('core/editor').getCurrentPostType();
	//クエリパラメータ
	const query = {
		per_page: -1,
    order: 'desc',
    status: 'publish',
		exclude: currentPostId, //除外する投稿
	};
	return {
		posts: select("core").getEntityRecords('postType', curentPostType, query),
	};
})(PostsSelect);

edit.js

//投稿を選択する関数
  let postArray = [];
  const selectPost = (postId) => {
    // オプションの配列を整数にして追加
		postArray.push(parseInt(postId[0]));
    // 配列内の重複した値をフィルタリング
		attributes.selectedPostId = postArray.filter((id, index, self) => self.indexOf(id) === index);
    console.log(attributes.selectedPostId);
	};

// 略。。。
return(
<div className={className}>
　<Placeholder
	label="投稿スライダー"
	icon="format-image"
	instructions="スライダーに表示する投稿を選択"
　>
	<PostsSelect
　　　   selectedPostId={attributes.selectedPostId}
	 selectPost={selectPost}
	/>
  </Placeholder>
</div>
);

試したこと

onChange プロパティとなるコールバック関数 selectPost でちゃんと属性値に値が取れているかの確認としてconsoleに出しています。問題なく属性値に保存できています
とするとやはり value プロパティが怪しいのでこちらもコメントにしてありますが、直接配列として値を渡してあげても、配列の０番目、最初の値しか取れていませんでした。

Comments

[1T2R3M4]

https://ja.stackoverflow.com/questions/88185

以下ご対応ください。
https://teratail.com/help#posted-otherservice

Answer 1

ありがとうございました。
KazuhiroHatano様のヒントをもとに解決しました

以下解決方法です
まず onChange プロパティのメソッドを変更しました。（もっといい方法がありそうですが）

//投稿を選択する関数
  const postArray = useRef([]);
  const selectPost = (postId) => {
    if (postArray.current.includes(parseInt(postId[0]))) {
      let index = postArray.current.indexOf(parseInt(postId[0]));
      postArray.current.splice(index, 1);
      setAttributes({ selectedPostId: postArray.current});
    } else {
      postArray.current.push(parseInt(postId[0]));
      setAttributes({ selectedPostId: postArray.current});
    }
	};

そしてコンポーネント側も配列を受け取るだけに変更

	return (
		<SelectControl
			id="oja_posts_select"
			label="投稿セレクトメニュー"
			multiple
			options={select_options} //投稿データの配列
      value={ selectedPostId } //更新された配列
			onChange={selectPost}    //値の更新メソッド
		/>
  );

React は付け焼き刃で学んでいましたが、やはり基礎から勉強したほうが良さそうですね、
どうしてこうなるか、、の理解がまだふわふわしているので、、

Answer 2

attributes がブロックのそれであるならば
setAttributesを使わずに直にattributesの値を書き換えても
他のどこかでattributesが更新されたときに変更が取り消されてしまうかと思います。
attributesの値の更新はsetAttributesを使うようにしてください。

ブロックのeditはレンダリングの度に実行されます
つまりlet postArray = [];もレンダリングの度に実行され
都度postArrayは空になるってことです。

postArrayもattributesの一つとするか、
あるいはuseRefを用いてコンポーネント内で
同一オブジェクトを持ち回れるようにするなどの措置が必要です。