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

Posted 2023-02-22

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

【英文标题】：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

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

【参考方案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