React で親のstateの更新で子のpropsの更新がされない

Question

質問したいこと

以下のような親(SideBar)と子(PaperFolder)の関係にあるコンポーネントをReactで書いています。

class SideBar extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      folders: [],
      isSelected: false,
    };

    this.createFolder = this.createFolder.bind(this);
    this.changeBackColor = this.changeBackColor.bind(this);
  }

  changeBackColor(message) {
    this.setState({isSelected: !this.state.isSelected});
  }

  createFolder() {
    this.setState({
      folders: this.state.folders.concat(
        <PaperFolder 
          key={this.state.numFolders}
          isSelected={this.state.isSelected}
          changeBackColor={this.changeBackColor}
        />
      )
    });
  }

  render() {
    return (
      // ...
    )
  }
}

class PaperFolder extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      name: "Untitled",
      selected: false,
    }

    this.select = this.select.bind(this);
  }

  select() {
    this.props.changeBackColor();
  }

  render() {
    const { classes } = this.props;
    const filenameText = <ListItemText primary={this.state.name} onDoubleClick={this.openTextbox}/>;
    const inputText = <TextField
                        value={this.state.value} 
                        onChange={this.handleValue}
                        onKeyDown={this.rename}
                        autoFocus
                      />;
    const folderStyle = clsx({
      [classes.folder]: true,
      [classes.selected]: this.props.isSelected,
    });

    return (
      <List className={classes.folder} onClick={this.select}>
        <ListItem 
          className={folderStyle}
          onClick={this.handleListClick}
        >
        // ...
       </ListItem>
      </List>
    )
  }
}

const styles = theme => ({
  folder: {
    paddingBottom: 0,
    paddingTop: 5,
  },

  selected: {
    backgroundColor: "#e6e6e6",
  }
});


export default withStyles(styles)(PaperFolder);

親のstateであるisSelectedを子のpropsとして渡しています。ここで、子要素がクリックしたときに子のselected()というメソッドが呼び出されて、その中では親コンポーネントのchangeBackColor()を呼び出しています。

親のchangeBackColorではisSelectedの反転を行っています。

私は親と子のisSelectedが関連付けられているのでこの処理によって子のisSelectedも更新されるだろうと考えていたのですが、結果は（親の）this.state.isSelectedは更新されるのに（子の）this.props.isSelectedは更新されないという挙動になってしまいました。

子のthis.props.isSelectedに親の変更を反映させるためにはどうすれば良いのでしょうか？初歩的な質問ですがよろしくおねがいします。

---

追記

maisumakunさんの指摘を受けてList要素を直接配列に入れるのではなく、要素の持つ情報のみを配列に入れ、List要素自体はmapを使って生成するように変更しましたが、未だに親要素のisSeletectedは更新されるのに小要素のものは更新されないという現象が続いています。

class SideBar extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      folders: [],
      isSelected: false,
    };

    this.createFolder = this.createFolder.bind(this);
    this.changeBackColor = this.changeBackColor.bind(this);
  }

  changeBackColor(message) {
    this.setState({isSelected: !this.state.isSelected});
    console.log(this.state.isSelected);
  }

  // このメソッドを書き換えた
  createFolder() {
    this.setState({
      folders: this.state.folders.concat(
        {
          key: this.state.numFolders, 
          isSelected: this.state.isSelected, 
          deleteFunc: this.deleteFolder,
          changeBackColor: this.changeBackColor
        }
      )
    });
  }


  render() {
    const { classes } = this.props;
    const folders = this.state.folders;

    return (
      <Drawer
        variant="permanent"
        classes={{
          paper: sidebarStatus  // hayashi: what is the paper?
        }}
        open={this.state.isOpen}
      >
        <div className={classes.allFolders}>
          // map を使って子を生成するようにした
          { folders.map((folder) =>
            <PaperFolder 
              key={folder.key} 
              isSelected={folder.isSelected}
              deleteFunc={folder.deleteFunc}
              changeBackColor={folder.changeBackColor}
            />
          )}
        </div>
      </Drawer>
    )
  }
}

Comments

[maisumakun]

子のほうのstateにもselectedがありますが、間違ってそちらを参照してしまっている、ということはないでしょうか。

[Yhaya]

クリックしたときに親の方と子の方でそれぞれ`alert(this.state.isSelected)`と`alert(this.props.isSelected)`を（changeBackColorメソッド内に挿入して）確認しているのですが値が異なってしまっています。

[maisumakun]

（子の方に、実際にどのような形でpropsを参照したかがないので、なんともいえない感じです）

[Yhaya]

失礼しました。コードを追記しました。
render()のなかでスタイル(folderStyle)を定義していて、その中でisSelectedを使っています。このスタイルは<ListItem>の中でclassNameを決めるのに使っています。

Answer 1

子コンポーネントをcreateFolderで配列に登録していますが、このようなやり方をすると子コンポーネントのpropsは配列に追加した時点のもので固定されてしまいます。

あえてこのような動作にしたい場合は別ですが、そうでない場合は配列には素材だけ入れておいて、render()（あるいはそこから呼び出される関数）内で配列をmapして子コンポーネントを生成してください。

Comments

[Yhaya]

配列に登録して使うとその時点で固定されてしまうというのは初耳でした。mapを試してみます。

[Yhaya]

ご指摘を受けて書き直してみたのですが、問題の現象が続いております。質問本文にコードを追記したので見ていただけますか？

[maisumakun]

isSelectedも配列に保存しているので、当然ながらそれは保存時の値で、後のstate.isSelectedの変更は追従しません。

render時に直接state.isSelectedを参照するようにしてください。

[Yhaya]

なるほど、isSelectedも配列の外に出さなければならないんですね。ありがとうございます、解決しました。