如何修复 'React: Expected an assignment or function call and instead saw an expression'（状态赋值）？

Question

我有一个新闻模块，可以从 link 获取文章并将它们传播到以下状态：

import React, { Component } from 'react'
import axios from 'axios'
import { URL } from '../../../config'

class NewsList extends Component {

    state = {
        items: [],
        start: this.props.start,
        amount: this.props.amount,
        end: this.props.start + this.props.amount

    }

    componentWillMount() {
        axios.get( `${ URL }/articles?_start=${ this.state.start }&end=${ this.state.end }` )
        .then( res => {
            this.setState( prevState => {
                items: [ ...prevState.items, ...res.items ]  
            } )
        } )
    }
    render() {
        return<div>
                news
            </div>
    }
}

export default NewsList

控制台报错：

Line 19:  Expected an assignment or function call and instead saw an expression  no-unused-expressions

所以看起来这是一个简单的错误，它与具有此错误的类似问题不同。

Answer 1

发生错误是因为您对 setState 的调用需要一个 returns 值的回调。您的回调没有返回值。

你应该更换

this.setState( prevState => {
  items: [ ...prevState.items, ...res.items ]  
} )

有

this.setState( prevState => ({
  items: [ ...prevState.items, ...res.items ]  
}) )

或与

this.setState( prevState => {
  return { items: [ ...prevState.items, ...res.items ]  }
} )

Answer 2

在 this.setState 前面加上 return 语句或删除多余的大括号，您应该会很好。

.then( res => this.setState({items: [ ...this.state.items, ...res.items ]}))

Answer 3

问题是您在 axios.get 调用中的 setState 调用。当你在箭头函数中直接 return 一个对象时，你必须用圆括号把它包起来。没有圆括号，它被解析为函数体。

来自 "Arrow functions - Returning object literals" 的文档：

Keep in mind that returning object literals using the concise body syntax params => {object:literal} will not work as expected.

This is because the code inside braces ({}) is parsed as a sequence of statements.

Remember to wrap the object literal in parentheses.

// This will not work.
const () => { item: "Test" };

// This will work
const () => ({ item: "Test" });

如何修复 'React: Expected an assignment or function call and instead saw an expression'（状态赋值）？

How to fix 'React: Expected an assignment or function call and instead saw an expression'( state assignment)?

state

expression

variable-assignment

ecmascript-6

reactjs