在 React 中渲染组件时有条件地更新 this.state? [英] Update this.state conditionally when rendering component in React?

问题描述

我有一个时间选择器，我想将值设置为 this.state.start.然而，this.state.start 的值可能等于 this.props.normal 或 this.props.spec 取决于用户是否已设置特殊营业时间，如果没有，则返回使用正常营业时间.

我在尝试执行 if-else 语句以更新 this.state.start 的状态时遇到问题.虽然它应该正确更新值(if-else 语句应该是正确的)，但 react 不允许您像我写的那样更新渲染函数中的状态.如何有条件地设置 this.state.start ?代码如下:

class NormalHours 扩展 React.Component {构造函数(道具){超级(道具)this.state = {开始:空，}}使成为() {//浏览器对这部分很生气if(this.props.specStart == this.props.normStart || this.props.specStart == null){//如果特殊时间为空或等于正常开始使用正常时间this.setState({开始:this.props.normStart;});}别的{//否则时间不同所以使用特殊时间this.setState({开始:this.props.specStart;});}返回(<div>//使用材质UI;这被呈现为一个文本框<时间选择器名称=开始时间"onChange={(e, date) =>{this.props.onSetStartTime(Utils.convertDateToTimeString(date))}}值={this.state.start}/>

解决方案

你可以有一个函数来设置 this.start.state 像这样:

class NormalHours 扩展 React.Component {构造函数(道具){超级(道具)this.state = {开始:空，}this.setStart();}setStart = () =>{if(this.props.specStart == this.props.normStart || this.props.specStart == null){//如果特殊时间为空或等于正常开始使用正常时间this.setState({开始:this.props.normStart;});}别的{//否则时间不同所以使用特殊时间this.setState({开始:this.props.specStart;});}}使成为() {返回(<div>//使用材质UI;这被呈现为一个文本框<时间选择器名称=开始时间"onChange={(e, date) =>{this.props.onSetStartTime(Utils.convertDateToTimeString(date))}}值={this.state.start}/>

)}}

我不太清楚在构造函数中调用方法是否被认为是不好的做法

this.state = {开始:空}

甚至在您之后立即修改状态时也是必需的.

I have a time picker that I want to set the value to this.state.start. However the value of this.state.start could be equal to this.props.normal or this.props.spec depending on whether the user has set special hours, if they have not then it falls back to using normal hours.

I'm running into an issue trying to do if-else statements to update the state of this.state.start. While it should update the value correctly (if-else statements should be correct), react doesn't allow you to update the state in the render function like I've written. How can I set this.state.start conditionally? Code below:

class NormalHours extends React.Component {
constructor(props) {
    super(props)
    this.state = {
        start: null,
    }
}
render() {
    //Browser is very angry at this part
    if(this.props.specStart == this.props.normStart || this.props.specStart == null)
    {
        //If special hours are null or equal to normal start use normal hours
        this.setState({
           start: this.props.normStart;
        });
    }
    else
    {
        //Else the hours are different so use special hours
        this.setState({
           start: this.props.specStart;
        });
    }
    return(
    <div>
        //Using Material UI; this is rendered as a textbox
        <TimePicker
          name="StartTime"
          onChange={(e, date) => {
            this.props.onSetStartTime(Utils.convertDateToTimeString(date))
          }}
          value={this.state.start}
          />

解决方案

You could have a function that sets this.start.state like so:

class NormalHours extends React.Component {
  constructor(props) {
      super(props)
      this.state = {
          start: null,
      }
      this.setStart();
  }
  setStart = () => {
    if(this.props.specStart == this.props.normStart || this.props.specStart == null)
    {
        //If special hours are null or equal to normal start use normal hours
        this.setState({
           start: this.props.normStart;
        });
    }
    else
    {
        //Else the hours are different so use special hours
        this.setState({
           start: this.props.specStart;
        });
    }
  }
  render() {
    return(
      <div>
          //Using Material UI; this is rendered as a textbox
          <TimePicker
            name="StartTime"
            onChange={(e, date) => {
              this.props.onSetStartTime(Utils.convertDateToTimeString(date))
            }}
            value={this.state.start}
            />
        </div>
      )
    }
  }

I'm not too clued up on whether calling methods in the constructor is considered bad practice or whether or not

this.state = {
  start: null
}

is even required when you're modifying state immediately after.

这篇关于在 React 中渲染组件时有条件地更新 this.state?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！