javascript - react : Calling setState within render method throws error

Question

正如标题所示，只有在我的聊天窗口中收到第一条消息之后 - 该初始消息是从 GET 请求检索的，因此它不是同步的 - 我想显示/呈现一个按钮。目前它抛出一个错误，说我无法在渲染方法中设置状态。

我还尝试了按钮类以及“父”类中的显示逻辑，“父”类是我的消息列表，我将按钮放入其渲染方法中。

this.props.messages 是一个消息数组，“messages”也是如此。 this.props.messages[0].data.text 是第一条消息，尽管当我尝试控制台它时，它会多次控制台开发工具中的每条消息，当然，当我尝试显示按钮时它会抛出 setState 错误.

我有一个简单的按钮类:

class Button extends Component {
render() {
    return (
        <div>
            {<button>Return</button >}
        </div>
    )
  }
}
export default Button;

和我的 messageList 类，其中有 this.props.messages，它是消息数组， this.props.messages[0] 是第一条消息，而 message..which 控制台是每条消息(如果我控制台) .记录它。

如果我写 (if message.data.text OR this.props.messages[0] === '我的第一个字符串') { console.log ('..... '} 那么它总是算作true 和控制台以及 setstate 进入循环。

import Message from './Messages'
import Button from './Button'


class MessageList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showing: false,
    };
    this.showButton = this.showButton.bind(this);
  }

  showButton() {
    const { showing } = this.state;
    this.setState({
      // toggle value of `showing`
      showing: !showing,

    });
  }

  componentDidUpdate(prevProps, prevState) {
    this.scrollList.scrollTop = this.scrollList.scrollHeight;
  }

  onlyInitialMessage(message) {
    if (this.props.messages[0].data.text = `Hi I'm Joe your store assistant, I'm here to help. Here's what I can do: Answer questions on store policies, process a return or just general inquiries.`) {
      this.showButton();
    }
  }

  // way to render a function.
  // {this.renderIcon()}   


  render() {
    return (
      <div className="sc-message-list" ref={el => this.scrollList = el}>
        {this.props.messages.map((message, i) => {

          { this.onlyInitialMessage() }

          return <Message message={message} key={i} />
        })}

        {this.state.showing && <Button />}

      </div>)
  }
}

我不确定我的逻辑是否在错误的地方？我尝试了很多次移动它，我是 React 新手!

Answer 1

首先，问题是您通过在渲染中调用 { this.onlyInitialMessage() } 来间接设置渲染方法中的状态。

其次，你的 if 条件不是比较值，而是分配值，该值总是返回 true

if (this.props.messages[0].data.text === `Hi I'm Joe your store assistant, I'm here to help. Here's what I can do: Answer questions on store policies, process a return or just general inquiries.`) {

要解决这个问题，必须在 componentDidMount 中调用 onlyInitialMessage

import Message from './Messages'
import Button from './Button'


class MessageList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showing: false,
    };
    this.showButton = this.showButton.bind(this);
  }
  componentDidMount() {
      this.onlyInitialMessage();
  }
  showButton() {
    const { showing } = this.state;
    this.setState({
      // toggle value of `showing`
      showing: !showing,

    });
  }

  componentDidUpdate(prevProps, prevState) {
    this.scrollList.scrollTop = this.scrollList.scrollHeight;
  }

  onlyInitialMessage(message) {
    if (this.props.messages[0].data.text == `Hi I'm Joe your store assistant, I'm here to help. Here's what I can do: Answer questions on store policies, process a return or just general inquiries.`) {
      this.showButton();
    }
  }

  // way to render a function.
  // {this.renderIcon()}   


  render() {
    return (
      <div className="sc-message-list" ref={el => this.scrollList = el}>
        {this.props.messages.map((message, i) => {

          return <Message message={message} key={i} />
        })}

        {this.state.showing && <Button />}

      </div>)
  }
}