获取错误属性 'then' 不存在于类型 'void'

Question

我正在使用 reactjs 并从 api 获取数据，但收到错误 “void”类型上不存在属性“then”。在这里我得到错误 searchScripData(searchScrip: any) { ApiService.searchScripDataList(searchScrip).then((res) => {this.setState({searchArray: res.data.data} ) });}强>

import React, { Component } from 'react'
import ApiService from "../../service/ApiService";
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Typography from '@material-ui/core/Typography';
type AppProps = {}
type AppState = {}
class AddUserComponent extends Component<any,any>{

    constructor(props: any){
        super(props);
        this.state ={
            searchArray:[],
            username: '',
            password: '',
            firstName: '',
            lastName: '',
            age: '',
            salary: '',
            message: null
        }
        this.saveUser = this.saveUser.bind(this);
        this.searchScripData = this.searchScripData.bind(this); 
    }
    componentDidMount() {
        this.searchScripData(this.requesDATA2());
     }

     requesDATA2()
     {
         let data1= { "isActive": true };
         return data1;
     }




    saveUser = (e: any) => {
        e.preventDefault();
        let user = {username: this.state.username, password: this.state.password, firstName: this.state.firstName, lastName: this.state.lastName, age: this.state.age, salary: this.state.salary};
        ApiService.addUser(user)
            .then(res => {
                this.setState({message : 'User added successfully.'});
                this.props.history.push('/users');
            });
    }
    searchScripData(searchScrip: any) {
        ApiService.searchScripDataList(searchScrip)
            .then((res) => {
               this.setState({searchArray: res.data.data} )
            });
    }

    onChange = (e: any) =>
        this.setState({ [e.target.name]: e.target.value });

    render() {
        return(
            <div>

{this.state.categories.map((row: any, key: any) => (
                            <TableRow>
                                <TableCell align="left">A101</TableCell>
                                </TableRow>
                        ))}

                <Typography variant="h4" style={style}>Add User</Typography>
                <form style={formContainer}>

                    <TextField type="text" placeholder="username" fullWidth margin="normal" name="username" value={this.state.username} onChange={this.onChange}/>

                    <TextField type="password" placeholder="password" fullWidth margin="normal" name="password" value={this.state.password} onChange={this.onChange}/>

                    <TextField placeholder="First Name" fullWidth margin="normal" name="firstName" value={this.state.firstName} onChange={this.onChange}/>

                    <TextField placeholder="Last name" fullWidth margin="normal" name="lastName" value={this.state.lastName} onChange={this.onChange}/>

                    <TextField type="number" placeholder="age" fullWidth margin="normal" name="age" value={this.state.age} onChange={this.onChange}/>

                    <TextField type="number" placeholder="salary" fullWidth margin="normal" name="salary" value={this.state.salary} onChange={this.onChange}/>

                    <Button variant="contained" color="primary" onClick={this.saveUser}>Save</Button>
            </form>
    </div>
        );
    }
}
const formContainer = {
    display: 'flex',
    flexFlow: 'row wrap'
};

const style ={
    display: 'flex',
    justifyContent: 'center'

}

export default AddUserComponent;

Answer 1

您必须在 searchScripData 中返回一个承诺（返回 ApiService.searchScripDataList）。

Answer 2

我们只能将then 块用于函数，它返回一个承诺。

searchScripDataList(){
    return new Promise((resolve, reject) => {
        // ...your code
fetch("https://jsonplaceholder.typicode.com/users")
.then(response => response.json())
.then((responseJson)=> {
resolve(responseJson) // it will capture by then
})
.catch(error=> reject()) // it will capture by catch
    })
}