Javascript 如何从状态访问React中状态内的另一个密钥

我试着学习如何反应，但我有一个问题。我想从教程中自己做一个例子

import React, { Component } from 'react';

class MyComponent extends Component {
  state = {
    persons: [],
    firstPersons: 5,
    variables: {
      Id: '1',
      first: this.firstPersons,
      input: {},
    }
  }

  render() {
    console.log('this.state', this.state);
    return (
      <div>
        <p>Hello React!!!</p>
      </div>
    );
  }
}

export default MyComponent;

---

请有人告诉我我的代码出了什么问题？

在JS中，您无法访问其内部的对象。你应该做：

import React, { Component } from 'react';

var myVar = 5;

class MyComponent extends Component {
  state = {
    persons: [],
    firstPersons: myVar,
    variables: {
      Id: '1',
      first: myVar,
      input: {},
    }
  }

  render() {
    console.log('this.state', this.state);
    return (
      <div>
        <p>Hello React!!!</p>
      </div>
    );
  }
}

export default MyComponent;

import React，{Component}来自'React'；
var-myVar=5；
类MyComponent扩展组件{
状态={
人员：[]，
第一人称：myVar，
变量：{
Id:'1'，
第一：myVar，
输入：{}，
}
}
render（）{
console.log（'this.state'，this.state）；
返回(
你好，反应

);
}
}
导出默认MyComponent；

或

import React，{Component}来自'React'；
类MyComponent扩展组件{
状态={
人员：[]，
第一人称：5，
变量：{
Id:'1'，
输入：{}，
}
}
组件willmount（）{
this.state.variables.first=this.state.firstPersons；
this.setState（this.state）；
}
render（）{
console.log（'this.state'，this.state）；
返回(
你好，反应

);
}
}
导出默认MyComponent；

或者如果componentWillMount（）不推荐使用

import React, { Component } from 'react';

class MyComponent extends Component {
  state = {
    persons: [],
    firstPersons: 5,
    variables: {
      Id: '1',
      input: {},
    }
  }

  static getDerivedStateFromProps(props, state) {
    this.state.variables.first = this.state.firstPersons;
    this.setState(this.state);
  }


  render() {
    console.log('this.state', this.state);
    return (
      <div>
        <p>Hello React!!!</p>
      </div>
    );
  }
}

export default MyComponent;

import React，{Component}来自'React'；
类MyComponent扩展组件{
状态={
人员：[]，
第一人称：5，
变量：{
Id:'1'，
输入：{}，
}
}
静态getDerivedStateFromProps（props，状态）{
this.state.variables.first=this.state.firstPersons；
this.setState（this.state）；
}
render（）{
console.log（'this.state'，this.state）；
返回(
你好，反应

);
}
}
导出默认MyComponent；

我建议您使用以下语法：

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor() {
    super();
    this.state = {
     persons: [],
     firstPersons: 5,
     variables: {
     Id: '1',
       first: this.firstPersons,
       input: {},
     }
  }

  render() {
   console.log('this.state', this.state);
   return (
      <div>
        <p>Hello React!!!</p>
      </div>
    );
  }
}

export default MyComponent;

import React，{Component}来自'React'；
类MyComponent扩展组件{
构造函数（）{
超级（）；
此.state={
人员：[]，
第一人称：5，
变量：{
Id:'1'，
第一：这个，第一人称，
输入：{}，
}
}
render（）{
console.log（'this.state'，this.state）；
返回(
你好，反应

);
}
}
导出默认MyComponent；

对象尚未创建，因此您无法引用它。您可以设置一个变量来保存所需的值并重新使用它。

const firstPersons=5；

然后使用类似以下内容

state={firstPersons:firstPersons，variables:{first:firstPersons}

@GabrielePetrioli我不能在render方法上加一个常量。因为状态在render（）中，根据我所看到的，我们可以在render（）和return（）之间定义一个常量.分配状态时，

first:此.firstPersons

为invalid@JohnSmith请在您的原始文件中添加更多的周围代码，以便我可以告诉您准确地将删除放在何处。您是否可以添加您的babel配置，以查看您是如何传输代码的？另外，最好使用我很抱歉，我的朋友，但是你怎么把var/const/let放在类组件的render（）之上呢你没有得到一个错误吗？我尝试了第一种解决方案，我得到了一个错误，我不能在那里放一个变量。第二种解决方案我不知道如何使用它，因为我得到了同样的错误，我不能使用状态。一些…在渲染方法上面：（你不理解这个想法。我确实重写了我的答案来解释，请检查。Var/const/let甚至可以在类之前定义，在你的情况下，我看不出有任何问题。此外，你还可以在componentWillMount（）中使用setState（）方法更新状态。）在呈现之前更新您的状态。这是一个很好的示例，第二个示例，但请更改组件将使用不同的方法装载，因为我得到和错误不再使用，因为已弃用my friend。警告！在React v17中弃用。请改为使用新的生命周期静态getDerivedStateFromProps。好的，如果使用React 17，请使用try getDerivedStateFromProps（）而不是componentWillMount（），请检查我更新的响应。不确定，因为我以前从未使用过getDerivedStateFromProps，但在以下文档中它应该可以工作。您无法在JavaScript中访问对象内部。您的示例不起作用。

import React, { Component } from 'react';

class MyComponent extends Component {
  state = {
    persons: [],
    firstPersons: 5,
    variables: {
      Id: '1',
      input: {},
    }
  }

  static getDerivedStateFromProps(props, state) {
    this.state.variables.first = this.state.firstPersons;
    this.setState(this.state);
  }


  render() {
    console.log('this.state', this.state);
    return (
      <div>
        <p>Hello React!!!</p>
      </div>
    );
  }
}

export default MyComponent;

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor() {
    super();
    this.state = {
     persons: [],
     firstPersons: 5,
     variables: {
     Id: '1',
       first: this.firstPersons,
       input: {},
     }
  }

  render() {
   console.log('this.state', this.state);
   return (
      <div>
        <p>Hello React!!!</p>
      </div>
    );
  }
}

export default MyComponent;