我的 Provider 组件中有什么语法错误？答案

【问题标题】：What is my syntax error in my Provider component?我的 Provider 组件中有什么语法错误？
【发布时间】：2018-10-23 15:51:20
【问题描述】：

请帮忙！ https://gyazo.com/c5982a3511467c8ca895ef8ddf708ef1 Syntax error: Unexpected token, expected ; (20:17) 我的组件有语法错误，不知道为什么我得到 ./src/Provider/index.js 语法错误：意外的令牌，预期的； (20:17)

18 | } 19 |

20 |使成为（） { | ^ 21 |
22 |返回（ 23 |

class index extends React.Component {

constructor() {
    super();
    this.state = {
        books: [],
        currentlyReading:[],
        wantToRead:[],
        read:[],
        addBooks: books => {

    }
}

   render()  {

      return (
         <MyContext.Provider 

        value={{...this.state}}>
      {this.props.children}


       </MyContext.Provider>)
}
}

导出默认索引；

【问题讨论】：

render() 前缺少一个逗号

标签： javascript reactjs

【解决方案1】：

 constructor() { // <- 1
    super();
    this.state = { // <- 2
      books: [],
      currentlyReading:[],
      wantToRead:[],
      read:[],
      addBooks: books => { // <- 3

  } // < - 3
 } // < - 2
 // <- 1 ???

您缺少关闭 } 来关闭构造函数。因此render() { /*..*/ } 是一个语法错误，因为它在方法体内而不是在类体内。

【讨论】：

对，然后是 2 } 哦哦等等我明白了。我希望人们可以正确缩进。
谢谢你们！！乔纳斯 + @Pointy

【解决方案2】：

我认为您需要在箭头函数的返回值周围加上括号

  addBooks: books => ({

  })

您还缺少构造函数的}。

下面是代码的样子

class index extends React.Component {
  constructor() {
    super();
    this.state = {
      books: [],
      currentlyReading:[],
      wantToRead:[],
      read:[],
      // you were missing parenthesis here
      addBooks: books => ({

      })
    }
  // you were also missing this } here
  }

  render()  {

    return (
        <MyContext.Provider 

      value={{...this.state}}>
        {this.props.children}


      </MyContext.Provider>)
  }
}

注意：您必须将箭头函数的返回值包装在括号中的原因是因为它是一个对象文字。看看documentation

【讨论】：

我错过了 cosntructor 的 } 吗？我想我有它.. 对不起，我是新手 constructor() { super(); this.state = { books: [], currentReading:[], wantToRead:[], read:[], addBooks: books =>() ({ }) }
我在 addBooks 中添加了括号：books => ({ })
@ruxi 修复了吗？我添加了你的代码应该是什么样子
现在我得到一个不同的错误：第 3 行：在模块主体中导入；重新排序到顶部导入/首次导入 React，{ Component} from 'react'；导出 const MyContext = React.createContext();从 '../BooksAPI' 导入 * 作为 BooksAPI
这意味着您的语法错误已修复。你知道为什么你必须给箭头函数加上括号吗？