Question

我制作了一个文本输入框，提交后将更新父组件中消息的状态。父组件中的消息将向下传递到消息显示。我希望负责显示消息的组件在每次提交后更新并显示消息，但无法弄清楚该怎么做。我在这里制作了一个代码沙箱：

https://codesandbox.io/s/unruffled-pasteur-nz32o

这是我的代码：

父组件：

import React, { Component } from "react";
import Messages from "./Messages";
import Input from "./Input";

export default class Container extends Component {
  constructor(props) {
    super(props);
    this.state = {
      messages: []
    };
  }

  updateMessage(message) {
    this.state.messages.push(message);
  }

  render() {
    return (
      <div>
        <Messages messages={this.state.messages} />
        <Input updateMessage={message => this.updateMessage(message)} />
      </div>
    );
  }
}

消息输入组件：

import React, { Component } from "react";

export default class Input extends Component {
  constructor(props) {
    super(props);
    this.state = {
      message: ""
    };
 }

  sendMessage() {
    this.props.updateMessage(this.state.message);
    this.setState({ message: "" });
  }

  render() {
    return (
      <div>
        <input
          type="text"
          value={this.state.message}
          onChange={({ target }) => {
            this.setState({ message: target.value });
          }}
        />
        <button onClick={() => this.sendMessage()}>Send</button>
      </div>
    );
  }
}

消息显示组件：

import React, { Component } from "react";

export default class Messages extends Component {
  render() {
    return this.props.messages.map(message => {
      return <div>{message}</div>;
    });
  }
}

谢谢！

Answer 1

在您的updateMessage(message)方法中，您可以尝试：

updateMessage(message) {
    let { messages } = this.state;
    messages.push(message)
    this.setState({ messages })
}

Answer 2

根据您的代码：

您正在直接和you're not supposed to do that修改状态（在构造函数中除外）。这样不会导致重新渲染。而是克隆状态，进行修改，然后通过setState更新状态。调用updateMessage(message) { this.state.messages.push(message); }将调用重新渲染。

setState

Answer 3

您的错误在于此部分

updateMessage(message) {
    this.state.messages.push(message);
  }

您不能直接更改状态。您必须使用setState（）方法更改状态

updateMessage(message) {
        this.setState({
             messages : [...this.state.messages, message]
        });
      }

状态更改后更新React子组件

3 个答案: