Question

是否可以在构造函数中访问状态值，并在同一构造函数中以其他状态值使用它？请参见下面的示例。

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      values1: {
        value1: "value 1"
      },
      values2: {
        value2: "value 2"
      },
      selected: {
        selectedValue: `Selected value is: ${this.state.values1.value1}`
      }
    }
  }
}

Answer 1

它不起作用。但是您可以在componentDidMount中设置另一个变量的值。

请参阅我的示例：

class App extends Component {
    constructor(props){
      super(props);
      this.state = {
        values1: {
          value1: "value 1"
        },
        values2: {
          value2: "value 2"
        },
      }
    }

    componentDidMount(){
      this.setState({selectedValue: "Selected value is: "+ this.state.values1.value1}); 
    }


    render() {
      return (
        <div>
          <p>
            {this.state.selectedValue}
          </p>
        </div>
      )
    }
  }

这是一个可行的示例-https://stackblitz.com/edit/react-2ra5ht

Answer 2

是的，但是您必须使用setState()方法

您将在上方声明 selected 状态，然后在构造函数中使用this.setState({selected: this.state.values1.value1})设置状态。

Answer 3

是的，您的方法将进行少量修改即可工作。 state是普通的JavaScript对象，因此您可以在构造函数中多次为其分配新属性。

constructor () {
    super ();
    this.state = {
        values1: {
            value1: "value 1"
        },
        values2: {
            value2: "value 2"
        }
    }
    this.state.selected = {
        selectedValue: "Selected value is: " + this.state.values1.value1
    }
}

还有sample

是否可以在同一构造函数中访问其他状态值？

3 个答案: