为什么带反引号的字符串插值对反应不起作用？

Question

我在一个个人项目中工作，我试图实现一个字符串插值，但由于某种原因它不起作用并且抛出错误。我正在使用 visual studio 代码，它抛出的错误如下：

属性预期分配
';'预计（2 次）
预期的声明或声明

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

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);

Answer 1

如果你想让newsection成为一个对象，应该这样做

newsection = {newsectionnmb:"placeholder"}

如果你想把它变成一个字符串，这应该适合你

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

为什么带反引号的字符串插值对反应不起作用？

why string interpolation with backticks isn't working on react?

javascript

string

interpolation

string-interpolation

reactjs