

### 前提

[teratailでも同様の質問をさせていただきました。](https://teratail.com/questions/vb7j2tundgssib)

WordPressのブロック開発を行っています。  
MAMPでローカル環境を構築しプラグインとしてカスタムブロックを追加して開発を行っています。

**実行環境:**  
WordPress 5.9.2  
npm 8.1.2  
node.js 16.13.1

### 実現したいこと

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

### 発生している問題

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

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

### 試したこと

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

### 該当のソースコード

posts-select.js

[code]

    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);
    
[/code]

edit.js

[code]

    //投稿を選択する関数
      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>
    );
    
[/code]


CC BY-SA 4.0
2022-04-05T12:56:20.360
88185
2022-04-06T22:41:54.823
2022-04-06T03:16:55.597
3060
49020
question
wordpress reactjs react-jsx
WordPressブロック開発にて<SelectControl>コンポーネントを複数選択にしたい


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

[code]

      //投稿を選択する関数
      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});
        }
        };
    
[/code]

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

[code]

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


CC BY-SA 4.0
2022-04-06T22:41:54.823
88205
2022-04-06T22:41:54.823
49020
88185
answer