TypeError：无法读取null的属性“ items”

Question

我正在创建程序，我需要在第二个组件的第一个组件中使用smth。如果可以帮助我们构建它。

我的代码

class Clock extends React.Component {
  state = { items: ["Hakob", "Arman"] };

  Add() {
    const newitems = this.state.items.concat([prompt("a")]);
    this.setState({ items: newitems });
  }

  render() {
    return (
      <div>
        <Clock2 Clock2={this.state.items} />
      </div>
    );
  }
}

class Clock2 extends React.Component {
  render() {
    return (
      <div>
        <button onClick={this.props.Add}>click</button>
        {this.state.items.map((e, i) => {
          return <div key={e + i}> {e} </div>;
        })}
      </div>
    );
  }
}

ReactDOM.render(<Clock />, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

我的错误`TypeError：无法读取null的属性“ items”。

如果可以的话，请帮我...

Answer 1

您需要将items和Add function传递给Clock2作为道具。然后在Clock2内部使用传递下来的道具。

class Clock extends React.Component {
  state = { items: ["Hakob", "Arman"] };

  Add = () => {
    const newitems = this.state.items.concat([prompt("a")]);
    this.setState({ items: newitems });
  }

  render() {
    return (
      <div>
        <Clock2 items={this.state.items} Add={this.Add} />
      </div>
    );
  }
}

class Clock2 extends React.Component {
  render() {
    return (
      <div>
        <button onClick={this.props.Add}>click</button>
        {this.props.items.map((e, i) => {
          return <div key={e + i}> {e} </div>;
        })}
      </div>
    );
  }
}

ReactDOM.render(<Clock />, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>