获取“解析错误：意外的令牌，预期的”;”“，同时在以下代码中生成反应应用程序

Question

所以我正在尝试创建一个基本的react应用程序，因此，在我的应用程序中.js文件中，它为我的渲染函数抛出了一个错误，我无法理解为什么。另外，如果错误是由于一些愚蠢的事情，请原谅，但我是一个真正的初学者js，可以真正使用帮助。我一直在关注YouTube教程。此处显示的计数器列表最初是计数器组件的一部分，但要在另一个非子组件中使用此组件，我必须将其提升到应用程序组件，因此我进行了一些复制粘贴，网站开始抛出此错误。

代码如下：

function App() {

state = {

  counters: [{

      id: 1,

      value: 4

    },

    {

      id: 2,

      value: 0

    },

    {

      id: 3,

      value: 0

    },

    {

      id: 4,

      value: 0

    },

  ],

};

handleIncrement = (counter) => {

  const counters = [...this.state.counters];

  const index = counters.indexOf(counter);

  counters[index] = {

    ...counter

  };

  counters[index].value++;

  console.log(this.state.counters[index]);

  this.setState({

    counters

  });

}

handleReset = () => {

  const counters = this.state.counters.map((c) => {

    c.value = 0;

    return c;

  });

  this.setState({

    counters

  });

}

handleDelete = (counterId) => {

  const counters = this.state.counters.filter((c) => c.id !== counterId);

  this.setState({

    counters

  });

}

render() {

  return ( 

     <div >

    <React.Fragment >

    <Navbar/>

    <main className = "container" >

    <Counters 

    counters = {

      this.state.counters

    }

    onReset = {

      this.handleReset

    }

    onIncrement = {

      this.handleIncrement

    }

    onDelete = {

      this.handleDelete

    }

    />   

    </main > 

    </React.Fragment >

    </div>

  );

}

}

这给出了以下错误消息：

/src/App.js

  Line 61:12:  Parsing error: Unexpected token, expected ";"

         render() {

                  ^

      return ( <

        React.Fragment >

       <

Answer 1

这是因为您将两个反应组件范例组合在一起。我们没有函数，您需要以这种方式更改代码才能使用：renderFunctional ComponentClass Componentclass App extends React.Component {&nbsp; state = {&nbsp; &nbsp; counters: [&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; id: 1,&nbsp; &nbsp; &nbsp; &nbsp; value: 4&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; id: 2,&nbsp; &nbsp; &nbsp; &nbsp; value: 0&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; id: 3,&nbsp; &nbsp; &nbsp; &nbsp; value: 0&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; id: 4,&nbsp; &nbsp; &nbsp; &nbsp; value: 0&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; ]&nbsp; };&nbsp; handleIncrement = counter => {&nbsp; &nbsp; const counters = [...this.state.counters];&nbsp; &nbsp; const index = counters.indexOf(counter);&nbsp; &nbsp; counters[index] = {&nbsp; &nbsp; &nbsp; ...counter&nbsp; &nbsp; };&nbsp; &nbsp; counters[index].value++;&nbsp; &nbsp; console.log(this.state.counters[index]);&nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; counters&nbsp; &nbsp; });&nbsp; };&nbsp; handleReset = () => {&nbsp; &nbsp; const counters = this.state.counters.map(c => {&nbsp; &nbsp; &nbsp; c.value = 0;&nbsp; &nbsp; &nbsp; return c;&nbsp; &nbsp; });&nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; counters&nbsp; &nbsp; });&nbsp; };&nbsp; handleDelete = counterId => {&nbsp; &nbsp; const counters = this.state.counters.filter(c => c.id !== counterId);&nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; counters&nbsp; &nbsp; });&nbsp; };&nbsp; render() {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <React.Fragment>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Navbar />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <main className="container">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Counters&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; counters={this.state.counters}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onReset={this.handleReset}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onIncrement={this.handleIncrement}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onDelete={this.handleDelete}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </main>&nbsp; &nbsp; &nbsp; &nbsp; </React.Fragment>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; );&nbsp; }}或以这种方式使用Functional Componentfunction App() {&nbsp; const [state, setState] = React.useState({&nbsp; &nbsp; counters: [&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; id: 1,&nbsp; &nbsp; &nbsp; &nbsp; value: 4&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; id: 2,&nbsp; &nbsp; &nbsp; &nbsp; value: 0&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; id: 3,&nbsp; &nbsp; &nbsp; &nbsp; value: 0&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; id: 4,&nbsp; &nbsp; &nbsp; &nbsp; value: 0&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; ]&nbsp; });&nbsp; const handleIncrement = counter => {&nbsp; &nbsp; const counters = [...state.counters];&nbsp; &nbsp; const index = counters.indexOf(counter);&nbsp; &nbsp; counters[index] = {&nbsp; &nbsp; &nbsp; ...counter&nbsp; &nbsp; };&nbsp; &nbsp; counters[index].value++;&nbsp; &nbsp; console.log(state.counters[index]);&nbsp; &nbsp; setState({&nbsp; &nbsp; &nbsp; counters&nbsp; &nbsp; });&nbsp; };&nbsp; const handleReset = () => {&nbsp; &nbsp; const counters = state.counters.map(c => {&nbsp; &nbsp; &nbsp; c.value = 0;&nbsp; &nbsp; &nbsp; return c;&nbsp; &nbsp; });&nbsp; &nbsp; setState({&nbsp; &nbsp; &nbsp; counters&nbsp; &nbsp; });&nbsp; };&nbsp; const handleDelete = counterId => {&nbsp; &nbsp; const counters = state.counters.filter(c => c.id !== counterId);&nbsp; &nbsp; setState({&nbsp; &nbsp; &nbsp; counters&nbsp; &nbsp; });&nbsp; };&nbsp; return (&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; <React.Fragment>&nbsp; &nbsp; &nbsp; &nbsp; <Navbar />&nbsp; &nbsp; &nbsp; &nbsp; <main className="container">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Counters&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; counters={state.counters}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onReset={handleReset}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onIncrement={handleIncrement}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onDelete={handleDelete}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; </main>&nbsp; &nbsp; &nbsp; </React.Fragment>&nbsp; &nbsp; </div>&nbsp; );}

Answer 2

函数组件中有一个方法。您已经将基于类的组件与基于函数的组件混合在一起。只需返回所需的值，删除呈现方法（将代码放在其中，外部），并将其余函数转换为常量：render()function App() {&nbsp; state = {&nbsp; &nbsp; counters: [&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; id: 1,&nbsp; &nbsp; &nbsp; &nbsp; value: 4&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; id: 2,&nbsp; &nbsp; &nbsp; &nbsp; value: 0&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; id: 3,&nbsp; &nbsp; &nbsp; &nbsp; value: 0&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; id: 4,&nbsp; &nbsp; &nbsp; &nbsp; value: 0&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; ]&nbsp; };&nbsp; const handleIncrement = counter => {&nbsp; &nbsp; const counters = [...this.state.counters];&nbsp; &nbsp; const index = counters.indexOf(counter);&nbsp; &nbsp; counters[index] = {&nbsp; &nbsp; &nbsp; ...counter&nbsp; &nbsp; };&nbsp; &nbsp; counters[index].value++;&nbsp; &nbsp; console.log(this.state.counters[index]);&nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; counters&nbsp; &nbsp; });&nbsp; };&nbsp; const handleReset = () => {&nbsp; &nbsp; const counters = this.state.counters.map(c => {&nbsp; &nbsp; &nbsp; c.value = 0;&nbsp; &nbsp; &nbsp; return c;&nbsp; &nbsp; });&nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; counters&nbsp; &nbsp; });&nbsp; };&nbsp; const handleDelete = counterId => {&nbsp; &nbsp; const counters = this.state.counters.filter(c => c.id !== counterId);&nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; counters&nbsp; &nbsp; });&nbsp; };&nbsp; return (&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; <React.Fragment>&nbsp; &nbsp; &nbsp; &nbsp; <Navbar />&nbsp; &nbsp; &nbsp; &nbsp; <main className="container">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Counters&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; counters={this.state.counters}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onReset={this.handleReset}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onIncrement={this.handleIncrement}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onDelete={this.handleDelete}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; </main>&nbsp; &nbsp; &nbsp; </React.Fragment>&nbsp; &nbsp; </div>&nbsp; );}