Question

目标：要有条件地呈现相应的出席状态图标（默认，存在，已取消，缺席）。

问题：我在条件语句中使用状态返回正确的图标时遇到问题。

似乎发生的第一件事是，在componentDidMount（）中，“状态”的状态设置为道具的状态。如控制台日志中所示，发生的最后一件事是this.state.status被“原谅”，这是正确的-看来状态已正确设置了吗？但是我对为什么两者之间发生的所有事情都不能反映这一点感到困惑。在条件语句中，我无法捕获状态来确定应返回哪个图标。

我已经尝试进行研究，但是我对React还是陌生的，并且还不确定如何用我的搜索会返回我需要的答案的方式来表达我的问题，所以我希望这是有意义的。感谢您的反馈！

代码：

class StudentDisplay extends Component {
    constructor(props) {
        super(props)
        this.state = {
            status: ""
        }
        this.checkStatus = this.checkStatus.bind(this)
    }

    checkStatus = currentStatus => {

        console.log(`checkStatus()... `)
        console.log(`currentStatus = ${currentStatus}`);

        // temporary conditional statement for testing
        if (currentStatus === "") {
            console.log(`... currentStatus === blank`)
        } else if (currentStatus === "excused") {
            console.log(`... currentStatus === excused`)
        }
    }

    componentDidMount = () => {

        console.log(`componentDidMount()...`)

        this.setState({
            status: this.props.status
        })

        let currentStatus = this.state.status
        console.log(`let currentStatus = this.state.status`)
        console.log(`currentStatus = ${currentStatus}`)
        console.log(`this.state.status = ${this.state.status}`)

        this.checkStatus(currentStatus);
        console.log(`this.checkStatus( ${currentStatus} )`);
    }

    render() {
        return (
            <div className="card card-body">
                {console.log(`render()... `)}
                {console.log(`and this.state.status = ${this.state.status}`)}
                <h2 className="text-center">{this.state.status}</h2>
            </div>

            // default icon = <i className="fas fa-question-circle"></i>
            // present icon = <i className="fas fa-user-check"></i>
            // excused icon = <i className="fas fa-user-minus"></i>
            // absent icon = <i className="fas fa-user-slash"></i>
        )
    }
}

控制台日志：

render（）...

and this.state.status =

componentDidMount（）...

让currentStatus = this.state.status

currentStatus =

this.state.status =

checkStatus（）...

currentStatus =

... currentStatus ===空白

this.checkStatus（）

render（）...

并且this.state.status =被免责

Answer 1

似乎发生的第一件事是在componentDidMount（）中，状态的状态设置为道具的状态。最后一件事如控制台日志中所示，发生的是this.state.status为 “借口”是正确的-看来状态正确组？但是我对为什么这两者之间发生的一切感到困惑不能反映出来。

一切之间什么？好像它已正确更新。

反应状态更新是异步的，这意味着您可以在函数/渲染周期内多次调用setState，并且它们都被“收集”并在当前渲染周期完成时运行。这是React对帐过程的一部分。如果希望看到更新反应状态的结果，则需要将回调传递给第二个参数setState函数。

IE。

setState({ newState }, () => console.log('This is the new state', this.state));

调用checkStatus时，您仍在使用“当前”状态值，而不是要排队更新的状态值。

建议

我不建议将道具复制到状态中，尽管这实际上是一种反模式，只需将逻辑直接放在render函数中即可。我建议使用switch语句选择要显示的图标。

render() {
  const { status } = this.props;
  let icon = null;

  switch (status) {
    case 'present':
      icon = <i className="fas fa-user-check" />;
      break;

    case 'excused':
      icon = <i className="fas fa-user-minus" />;
      break;

    case 'absent':
      icon = <i className="fas fa-user-slash" />;
      break;

    default:
      icon = <i className="fas fa-question-circle" />;
      break;
  }

  return (
    <div className="card card-body">
      <h2 className="text-center">{this.state.status}</h2>
      {icon}
    </div>
  )
}

如何根据道具的值有条件地渲染图标？

1 个答案: