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

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>
)
}

如果您没有任何项目，则它为空。