Javascript 得到一个；分析错误：意外标记，应为“quot；”&引用&引用；在以下代码中创建react应用程序时

因此，我正在尝试制作一个基本的react应用程序，因此，在我的app.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>
  );
}
}

函数应用程序（）{
状态={
计数器：[{
id:1，
价值：4
},
{
id:2，
数值：0
},
{
id:3，
数值：0
},
{
id:4，
数值：0
},
],
};
handleIncrement=（计数器）=>{
常量计数器=[…this.state.counters]；
const index=计数器。indexOf（计数器）；
计数器[索引]={
柜台
};
计数器[索引]。值++；
log（this.state.counters[index]）；
这是我的国家({
计数器
});
}
handleReset=（）=>{
const counters=this.state.counters.map（（c）=>{
c、 数值=0；
返回c；
});
这是我的国家({
计数器
});
}
handleDelete=（计数器ID）=>{
const counters=this.state.counters.filter（（c）=>c.id！==counterId）；
这是我的国家({
计数器
});
}
render（）{
报税表（
);
}
}

这将给出以下错误消息：

/src/App.js
  Line 61:12:  Parsing error: Unexpected token, expected ";"



         render() {
                  ^
      return ( <
        React.Fragment >
       <

/src/App.js
第61:12行：分析错误：意外标记，应为“；”
render（）{
^
报税表（<
反应。片段>
<

函数组件中有一个

render（）

方法。您将基于类的组件与基于函数的组件混合在一起。只需返回所需的值，删除render方法（将其内部和外部的代码）并将其余函数转换为常量：

函数应用程序（）{
状态={
计数器：[
{
id:1，
价值：4
},
{
id:2，
数值：0
},
{
id:3，
数值：0
},
{
id:4，
数值：0
}
]
};
常量handleIncrement=计数器=>{
常量计数器=[…this.state.counters]；
const index=计数器。indexOf（计数器）；
计数器[索引]={
柜台
};
计数器[索引]。值++；
log（this.state.counters[index]）；
这是我的国家({
计数器
});
};
常量handleReset=（）=>{
const counters=this.state.counters.map（c=>{
c、 数值=0；
返回c；
});
这是我的国家({
计数器
});
};
const handleDelete=计数器ID=>{
const counters=this.state.counters.filter（c=>c.id！==counterId）；
这是我的国家({
计数器
});
};
返回(
);
}

这是因为您将两个组件组合在一起。 我们在

功能组件

中没有

渲染

功能，您需要以这种方式更改代码以使用

类组件

：

class App extends React.Component {
  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>
    );
  }
}

---

我认为我们需要更多的上下文。您可能没有正确地关闭上一个方法。是的，请发布整个组件代码。您可能错过了关闭参数或括号。函数组件没有呈现方法，只返回JSX。请参阅

function App() {
  const [state, setState] = React.useState({
    counters: [
      {
        id: 1,
        value: 4
      },
      {
        id: 2,
        value: 0
      },
      {
        id: 3,
        value: 0
      },
      {
        id: 4,
        value: 0
      }
    ]
  });

  const handleIncrement = counter => {
    const counters = [...state.counters];
    const index = counters.indexOf(counter);
    counters[index] = {
      ...counter
    };
    counters[index].value++;
    console.log(state.counters[index]);
    setState({
      counters
    });
  };

  const handleReset = () => {
    const counters = state.counters.map(c => {
      c.value = 0;
      return c;
    });
    setState({
      counters
    });
  };

  const handleDelete = counterId => {
    const counters = state.counters.filter(c => c.id !== counterId);
    setState({
      counters
    });
  };

  return (
    <div>
      <React.Fragment>
        <Navbar />
        <main className="container">
          <Counters
            counters={state.counters}
            onReset={handleReset}
            onIncrement={handleIncrement}
            onDelete={handleDelete}
          />
        </main>
      </React.Fragment>
    </div>
  );
}