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

Question

我定义了一个数组。

然后将数组作为 props 传递给 Console child。

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 函数。然后我将匹配案例的内容推送到数组中。

控制台.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 运算符，但我不确定并且很难找到有关此类场景的任何阅读 Material 。

Answer 1

Console组件仅在其 Prop 或状态发生变化时才会呈现。 Prop 只能由组件的父级更改。 State 是组件内部对象，由组件本身改变(但可能取决于 props 或其他计算)。

Props 是不可变的。这意味着你不能用

覆盖它们

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

你甚至声明了moduleArray作为const .更改 moduleArray在组件的父级中(通过回调函数)或使用组件的 Prop 初始化状​​态并使用 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;