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

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 我将一个参数传递给运行 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 组件仅在其道具或状态发生变化时才会呈现。道具只能由组件的父级更改。 State 是一个组件内部对象，由组件本身更改（但可能取决于 props 或其他计算）。

并且道具是不可变的。这意味着你不能用

覆盖它们

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;