Question

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

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

使用return语句添加this.setState或删除多余的花括号，您应该会很好。

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

Answer 2

问题是您在setState通话中进行了axios.get通话。当直接通过箭头函数返回对象时，必须用圆括号将其包装起来。没有圆括号，它将被解析为函数体。

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

请记住，使用简洁的主体语法params => {object:literal}返回对象文字将无法按预期工作。

这是因为括号（{}）中的代码被解析为语句序列。

请记住将对象文字用括号括起来。

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

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

Answer 3

发生错误是因为您对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 ]  }
} )

如何解决“反应：期望一个赋值或函数调用，而看到一个表达式”（状态赋值）？

3 个答案: