如何修复“反应：预期分配或函数调用，而是看到一个表达式”（状态分配）？答案

【问题标题】：How to fix 'React: Expected an assignment or function call and instead saw an expression'( state assignment)?如何修复“反应：预期分配或函数调用，而是看到一个表达式”（状态分配）？
【发布时间】：2019-10-29 05:02:26
【问题描述】：

我有一个新闻模块，可以从链接中获取文章并以某种状态传播它们：

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

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

【问题讨论】：

标签： reactjs ecmascript-6 expression state variable-assignment

【解决方案1】：

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

你应该替换

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 ]  }
} )

【讨论】：

这摆脱了错误？我原以为您必须返回 this.setState 来解决承诺，而不仅仅是返回更新程序函数。
@JoshPittman - .then ( res => { ... }) 是链中的最后一个 Promise。它可以简单地执行它包装的函数。如果链到另一个 Promise，只需要返回一个 Promise，它需要等待结果。所以这是链中最后一个的“特殊情况”。（至少我是这么理解的。）

【解决方案2】：

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

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

请记住，使用简洁的正文语法 params => {object:literal} 返回对象字面量不会按预期工作。

这是因为大括号 ({}) 内的代码被解析为语句序列。

记得将对象字面量用括号括起来。

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

tnx，不使用prevState是安全的方法吗？
绝对安全。当您想防止批处理时，请使用 setState 更新程序功能。其余时间只传递一个对象会更简单。我在这里解释得更好worklog.svbtle.com/setState