Question

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

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

根据chrome的控制台说

未捕获（承诺）TypeError：_this2.props.state不是函数

并指向此：

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

Answer 1

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

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

Answer 2

 let liItems = projects.length && projects.map((project) =>
        <li key={project.name}>{project.name}</li>
    );

在渲染中进行这样的更改

    render(){
return(
<ul>{liItems}</ul>
)
}

如果您没有任何项目，它将显示为空。

React JS this.props.state不是函数吗？

2 个答案: