正确推送到作为props传递的数组

Question

我定义了一个数组。

然后将数组作为道具传递给Console子项。

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，我将参数传递给运行switch语句的append函数。然后，我将匹配大小写的内容推送到数组。

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（通过回调函数）或使用组件的props初始化状态，并使用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;