为什么带有反引号的字符串插值无法正常工作？

问题描述

我正在一个个人项目中，并且尝试实现字符串插值，但是由于某种原因，它无法正常工作，并且会引发错误。 我正在使用Visual Studio代码，其引发的错误如下：

1. 预期的财产分配
2. ';'预期（2次）
3. 需要声明或声明

这是我放置特定插值的行：

newsection = {`${newsectionnmb}`:"placeholder"}

这是我完整的代码：

import React,{ Component } from "react";
import { NavLink,match } from "react-router-dom";
import { withRouter } from "react-router-dom";
import axios from "axios";


class AddContent extends Component{
    constructor(props) {
        super(props)
        this.state = {
            name: "",content: "",courseName:"",actualContent: [],section:"NEW",video: ""
        }

        
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }
    componentDidMount() {
        axios.get(`http://localhost:5000/course/id/${Number(this.props.match.params.id)}`)
        .then( (response)=> {
            this.setState({
            courseName: response.data.name,actualContent: response.data.content
            });
            if(this.props._id != response.data.adminId) {
                this.props.history.push("/");
            }
        })
        .catch(function (error) {
            console.log(error);
            alert("we couldn't fetch the course data,try again later by reloading the page")
        })
          
    }

    handleChange(event) {
        const target = event.target;
        const value = target.value;
        const name = target.name;
    
        this.setState({
          [name]: value
        });
      }
    
      handleSubmit= (event)=> {
        if (this.state.name !== "" ) {
            if (this.state.section === "NEW") {
                newsectionnmb = this.state.actualContent.length +1;
                newsection = {`${newsectionnmb}`:"placeholder"}
            }
            event.preventDefault();

            axios({
                method: 'put',url: `http://localhost:5000/course/add-content/${Number(this.props.match.params.id)}`,data: {
                content: this.state.content
                }
                
                })
            }
      }

    render() {
    let sectionlist = this.state.actualContent.length > 0
        && this.state.actualContent.map((item,i) => {
      return (
        <option key={i} value={item.name}>{item.name}</option>
      )
    },this);
        return (
            <div className="courses">
                {this.props.registered === true?
                <div>
                    
                    
                    <form onSubmit={this.handleSubmit} className="Register">
                    <h1>Add guide</h1>
                <h2>{this.state.courseName}</h2>
                <p>quotation marks aren't allowed</p>
                <div>
                    <input             
            name="name"
            type="text"
            onChange={this.handleChange}
            placeholder="name"/>
            </div>
            <div>
            <input             
            name="video"
            type="text"
            onChange={this.handleChange}
            placeholder="URL for video"/>
            </div>
            <div>
                
                    <textarea             
            name="content"
            type="text"
            onChange={this.handleChange}
            placeholder="content"/>
            </div>
            <label>select section:</label>
  <select name="section" onChange={this.handleChange} className="select">
    <option value="NEW">New Section</option>
            {sectionlist}
  </select>
            <button type="submit" className="coursesub">Submit</button>
            <NavLink exact to="/courses">Go back to course</NavLink>
            </form>




                </div>
                

                
                :
                <div>
                <h1>Welcome to SSG courses app,to start using please login.</h1>
                <NavLink exact to="/login">Login</NavLink>
                </div>
                }
            </div>
        )
    }

}

export default withRouter(AddContent);

解决方法

如果要使newsection成为对象，则应这样做

newsection = {newsectionnmb:"placeholder"}

如果您尝试将其设置为字符串，这应该对您有用

newsection = `${newsectionnmb}:"placeholder"`