Javascript 将（this.state）类型变量直接插入JSX

我对反应和ES6是新手。我想打印（this.state）类型变量的数据

我的代码创建了一个随机字符串，我能够做到这一点。我可以将this.state.resultCode直接打印到控制台，但无法在“p”标记中打印其值

我的代码

import React, { Component } from 'react';
import { FormGroup, FormControl, Checkbox } from 'react-bootstrap';

class ButtonComponent extends Component {

  constructor(props){
    super(props);
    this.state = {
      smallLetters: false,
      capitalLetters: false,
      numbers: false,
      specialCharacters: false,
      resultCode: ''
    }
  }

  generateCode(){
    let mask = '';
    if(!this.state.smallLetters && !this.state.capitalLetters && !this.state.numbers && !this.state.specialCharacters){
      mask = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789~`!@#$%^&*()_+-={}[]:";\'<>?,./|\\';
    } else {
      if (this.state.smallLetters) mask += 'abcdefghijklmnopqrstuvwxyz';
      if (this.state.capitalLetters) mask += 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
      if (this.state.numbers) mask += '0123456789';
      if (this.state.specialCharacters) mask += '~`!@#$%^&*()_+-={}[]:";\'<>?,./|\\';
    }
    let result = '';
    for (let i = 32; i > 0; --i)
      result += mask[Math.floor(Math.random() * mask.length)];
    this.setState({resultCode: result});
    console.log(this.state.resultCode);
  }

  toggleChange(number){
    if (number == 0){
      this.setState({smallLetters: !this.state.smallLetters});
    }else if (number == 1) {
      this.setState({capitalLetters: !this.state.capitalLetters});
    }else if (number == 2) {
      this.setState({numbers: !this.state.numbers});
    }else if (number == 3){
      this.setState({specialCharacters: !this.state.specialCharacters});
    }
  }

  render(){
    return(
      <div>
        <form>
        <div className="form-check">
            <Checkbox className="form-check-input" type="checkbox" onClick={() => this.toggleChange(0)}>
             <label className="form-check-label">Small Characters a-z</label>
            </Checkbox>
        </div>
        <div className="form-check">
            <Checkbox className="form-check-input" type="checkbox" onClick={() => this.toggleChange(1)}>
             <label className="form-check-label">Capital Characters A-Z</label>
            </Checkbox>
        </div>
        <div className="form-check">
            <Checkbox className="form-check-input" type="checkbox" onClick={() => this.toggleChange(2)}>
             <label className="form-check-label">Numbers 0-9</label>
            </Checkbox>
        </div>
        <div className="form-check">
            <Checkbox className="form-check-input" type="checkbox" onClick={() => this.toggleChange(3)}>
             <label className="form-check-label">Special Characters</label>
            </Checkbox>
        </div>
        </form>
        <button className="btn btn-outline-primary generateButton" onClick={() => this.generateCode()}>Generate CODE!</button>
        <p>{this.state.resultCode}</p>
      </div>
    )
  }

}

export default ButtonComponent;

import React，{Component}来自'React'；
从“react bootstrap”导入{FormGroup，FormControl，Checkbox}；
类ButtonComponent扩展组件{
建造师（道具）{
超级（道具）；
此.state={
小写字母：假，
国会议员：错，
数字：假，
特殊字符：false，
结果代码：“”
}
}
生成代码（）{
让面具=“”；
if（！this.state.smallLetters&&！this.state.capitalLetters&&！this.state.numbers&&！this.state.specialCharacters）{
掩码='ABCDEFGHIJKLMNOPQRSTUVWXYZABCDFGHIJKLMNOPQRSTUVXYZ0123456789~`！@$%^&*（^+-={}[]：“；\”？，./；\”；
}否则{
if（this.state.smallLetters）掩码+='abcdefghijklmnopqrstuvwxyz'；
if（this.state.capitalLetters）掩码+='ABCDEFGHIJKLMNOPQRSTUVWXYZ'；
if（this.state.numbers）掩码+='0123456789'；
如果（this.state.specialCharacters）掩码+='~`！@$%^&*（）U+-={}[]：“；\'？，./\\”；
}
让结果=“”；
for（设i=32；i>0；--i）
结果+=mask[Math.floor（Math.random（）*mask.length）]；
this.setState（{resultCode:result}）；
console.log（this.state.resultCode）；
}
切换更改（编号）{
如果（数字==0）{
this.setState（{smallLetters:！this.state.smallLetters}）；
}else if（数字==1）{
this.setState（{capitalLetters:！this.state.capitalLetters}）；
}else if（数字=2）{
this.setState（{numbers:！this.state.numbers}）；
}else if（数字=3）{
this.setState（{specialCharacters:！this.state.specialCharacters}）；
}
}
render（）{
返回(
this.toggleChange（0）}>
小字符a-z
this.toggleChange（1）}>
大写字母A-Z
this.toggleChange（2）}>
数字0-9
this.toggleChange（3）}>
特殊字符
this.generateCode（）}>生成代码！
{this.state.resultCode}

)
}
}
导出默认按钮组件；

此组件将导出为

import React from 'react';
import ReactDOM from 'react-dom';
import ButtonComponent from './components/global';

ReactDOM.render(
    <ButtonComponent />, document.getElementById('generateButton')
)

从“React”导入React；
从“react dom”导入react dom；
从“./components/global”导入按钮组件；
ReactDOM.render(
，document.getElementById（'generateButton'））
)

我尝试过危险地设置innerhtml，尝试过将“p”标记改为“div”标记，以及与这里发布的其他问题不同的方法，但即使这样也不起作用

那个么，打印this.state.resultCode数据的正确方法是什么呢

---

编辑：将来如果有人遇到此问题，请参考此代码。代码现在运行正常

您直接将状态的属性赋值给另一个值。这就是所谓的突变，它是一个不可反应的过程。像这样做

this.state.numbers=！此.state.numbers

不会触发组件的重新呈现。只要您想更改组件的状态，就需要使用

setState