Правильно нажать на массив, который был передан в качестве реквизита

Question

Я определил массив.

Затем передал массив дочернему элементу консоли в качестве подпорки.

main.js

class Main extends Component {
  constructor() {
    super();
    this.moduleArray = [];
    this.state = {
      moduleArray: this.moduleArray
    };
  }
  render() {
    return (
      <div id="builder-root">
        <Console moduleArray={this.moduleArray} />
      </div>
    );
  }
}
}
export default Main;

Я назначил массив для const

Затем onClick Я передаю параметр в функцию append, которая выполняет оператор switch.Затем я помещаю содержимое соответствующего случая в массив.

console.js

class Console extends React.Component {
  render() {
    const { moduleArray } = this.props;
    const append = x => e => {
      switch (x) {
        case 0:
          console.log("case0");
          moduleArray.push(
            <div
              key={moduleArray.length}
              id={moduleArray.length}
              style={{ fontSize: 0, lineHeight: 0 }}
            >
              <Mod1 />
            </div>
          );
          console.log("pushed");
          break;
        //other switch cases
        default:
      }
      this.setState({
        moduleArray: this.moduleArray
      });
    };
    return (
      <div id="console">
        <input onClick={append(0)} value="Single col" type="submit" />
        //other clicks passing parameters
      </div>
    );
  }
}
export default Console;

И ..... ничего не происходит.Ну, я ничего не говорю.Функция запускается и выводит консоль из системы, и я не получаю сообщение об ошибке.Но контент не рендерится.

Я думаю, что мне нужно каким-то образом использовать оператор spread, но я неуверен и пытаюсь найти какой-либо материал для чтения по подобному сценарию.

Answer 1

Компонент Console отображается только в том случае, если меняется его реквизит или состояние.Реквизит может быть изменен только родителем компонента.Состояние - это внутренний объект компонента, который изменяется самим компонентом (но может зависеть от реквизита или других вычислений).

И реквизиты являются неизменными.Это означает, что вы не можете перезаписать их на

moduleArray.push(
            <div
              key={moduleArray.length}
              id={moduleArray.length}
              style={{ fontSize: 0, lineHeight: 0 }}
            >
              <Mod1 />
            </div>
          );

Вы даже объявили moduleArray как const.Измените moduleArray в родительском элементе вашего компонента (с помощью функции обратного вызова) или инициализируйте состояние с помощью реквизитов компонента и измените состояние с помощью this.setState(/*...*/).

Возможное решение перечислено ниже:

class Main extends Component {
    constructor(props) {
        super(props);

        this.state = {
            moduleArray: [] // initialize empty or use props to init state
        };
    }

    componentDidMount() {
        // example
        // this.setState({moduleArray: serverResponse.modules}
    }

    render() {
        return (
            <div id="builder-root">
                <Console moduleArray={this.state.moduleArray} addModule={(module) => this.setState({
                    moduleArray: [
                        ...this.state.moduleArray,
                        module
                    ]
                })}/>
            </div>
        );
    }
}
}
export default Main;

class Console extends React.Component {
    render() {
        const {
            moduleArray,
            addModule
        } = this.props;


        const append = x => e => {
            switch (x) {
                case 0:

                    addModule(
                        <div
                            key={moduleArray.length}
                            id={moduleArray.length}
                            style={{fontSize: 0, lineHeight: 0}}
                        >
                            <Mod1/>
                        </div>
                    );

                    break;
                //other switch cases
                default:
            }
        };
        return (
            <div id="console">
                <input onClick={append(0)} value="Single col" type="submit"/>
                {/*other clicks passing parameters*/}
            </div>
        );
    }
}

export default Console;