时间戳

首页 > 解决方案 > React JS this.props.state 不是函数？

javascript - React JS this.props.state 不是函数？

问题描述

不明白我在这里的陈述有什么问题，我一直在谷歌上查找错误消息，但我真的不明白这个问题。

componentDidMount()
{
    fetch('http://192.168.1.33:8080/getprojects/')
    .then(response => response.json())
    .then(data => {
        this.props.state({
            projects: data.name
        });
    });
}

根据 chrome 的控制台，它说

Uncaught (in promise) TypeError: _this2.props.state is not a function

并指出这一点：

this.props.state({
        projects: data.name
    });

我在这里迷路了。React JS 的新手试图创建一个不断获取数据的网站（这里我试图通过在我的 Node Express 服务器上获取名称来填充格式为 ul li 的列表）

编辑

这是 Render 函数中 Return 之前的完整代码：

 class ProjectList extends Component {
    constructor (props) {
        super (props);
        this.state = {
            projects: [],
        };
    }

    componentDidMount()
    {
        fetch('http://192.168.1.33:8080/getprojects/')
        .then(response => response.json())
        .then(data => {
            this.setState({projects: data.name})
        });
    }

   render () {
    let projects = this.state.projects;
    let liItems = projects.map((project) =>
            <li key={project.name}>{project.name}</li>
        );

之后它只是基本的 HTML

标签： javascriptreactjsfetch

解决方案

您正在获取未定义的属性，因为渲染函数在 componentDidMount 函数之前运行。所以当它第一次尝试运行时，它遇到的第一件事就是：let projects = this.state.projects;你最初定义它，它是一个空数组。因此，在您的渲染函数中，删除上面的行并替换为：

if (this.state.projects.length === 0){ return <div>Loading</div> } 因此，当您的组件最初运行时，它将在瞬间渲染 Loading div，并且当您的数组被填充时，您的组件将被渲染为您的数组。

推荐阅读