Question

有两个文件： RegistrationScreen.js 和 api.js 。

在 api.js 内部，我正在运行fetch()函数：

export const fetchAllUsers = () => {
    fetch(`http://${localIP}:${port}/api/userData`)
        .then(res => res.json()) 
        /* .then(json => console.warn('JSON: ' + json.userData[0].username))
        .catch(e => console.warn('ERROR: ' + e)) */
}

如果对第二个.then()进行评论，则可以从响应中看到用户名。

我正在将此函数导入 RegistrationScreen.js ：

import { fetchAllUsers } from '../../constants/api';

export default class RegistrationScreen extends Component{

    static defaultProps = {
        fetchAllUsers
    }

    onCreateButtonPress = async () => {
        ...
        let usernameValidation = await this.checkUsernameUniqueness();
        ...
    }

    checkUsernameUniqueness = async () => {
        const data = await this.props.fetchAllUsers();
        console.warn('user = ' + data)
    }
    ...

}

结果，我进入控制台 user = undefined 。为什么我可以在 api.js 中看到数据，却不能在 RegistrationScreen.js 中看到数据？

UPDATE_1

如果在 RegistrationScreen.js 中执行console.warn(this.props.fetchAllUsers)，我会看到函数代码，因此该函数可见。

Answer 1

问题在于，当您致电fetchAllUsers时，您什么都没有返回，这就是为什么您得到undefined的原因。没有return的函数返回未定义。

这将返回undefined

export const fetchAllUsers = () => {
    fetch(`http://${localIP}:${port}/api/userData`)
        .then(res => res.json()) 
        /* .then(json => console.warn('JSON: ' + json.userData[0].username))
        .catch(e => console.warn('ERROR: ' + e)) */
}

这将返回一个承诺

export const fetchAllUsers = () => {
    // added return 
    return fetch(`http://${localIP}:${port}/api/userData`)
        .then(res => res.json())
}

您忘了退还fetch的承诺

来自Fetch（）的响应未定义

1 个答案: