state' 未定义 no-undef

Question

所以我正在学习有关 React 的课程，但我不知道如何解决这个问题。它建议我将 Spread operator '...' 而不是 'this.' 放到数组中的 select 元素中。但是当我这样做时它仍然显示错误 'state' is not defined no-undef'。我是 React 的新手，我是不是做错了什么？

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
import { render } from '@testing-library/react';
import React from 'react';
import { Component } from 'react/cjs/react.production.min';
import './App.css';
import Person from './Person/Person';

class App extends Component {
  state = {
    persons: [{name: 'Max', age: 22},
              {name: 'Manu', age: 19},
              {name: 'Stephanie', age: 41},
              {name: 'George', age: 40}
            ]
    
  }

  render() {
  return (
    <div className="App">
     <h1>Hi, I am a React App</h1>
    <p>This is really working!</p>
    <button>Switch Name</button>
    <Person name= {this.state.persons[0].name} {this.state.persons[0].age}/>
    <Person {this.persons[1].name} {this.state.persons[1].age}/>
    <Person {this.state.persons[2].name} {this.state.persons[2].age}> My Hobbie is swimming.</Person>
    <Person {this.state.persons[3].name} {this.state.persons[3].age}/>
    </div>
  );
}
}


export default App;

Answer 1

假设 <Person /> 组件接受 age 和 name 属性，您可以使用以下扩展语法将具有匹配属性的整个对象扩展到该组件：

<Person {...{this.persons[0]}} />

以上等价于 shorthand

<Person name={this.persons[0].name} age={this.persons[0].age} />

另请注意您插入的语法错误：

<Person name= {this.state.persons[0].name} {this.state.persons[0].age}/>

首先，space 不应该存在，因为您需要将值传递给给定的属性，这与普通 JS 语法不同，您可以使用或不使用 spaces:

const x = 1; 或 const x=1;

其次，您试图将 age 值传递给组件，但您没有指出应该将其分配给哪个属性。

继续加油，祝你好运。

state' 未定义 no-undef

state' is not defined no-undef

html

javascript

jsx

reactjs