Реагировать 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 он говорит, что

Uncaught (в обещании) TypeError: _this2.props.state не является функцией

и указывает на это:

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

Япотерянный здесьВпервые в React JS пытается создать веб-сайт, который постоянно извлекает данные (здесь я пытаюсь заполнить список в формате ul li, получая имена на моем сервере Node Express)

EDIT

вот полный код перед функцией Return внутри функции Render:

 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

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

Измените, как это и при рендеринге

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

Если у вас нет проектов, он будет пустым.

Answer 2

Вы получаете свойство undefined, потому что функция рендеринга запускается перед функцией componentDidMount.Поэтому, когда он впервые пытается запустить, первое, с чем он сталкивается, это: let projects = this.state.projects;, и вы определили его изначально, это пустой массив.Итак, в вашей функции рендеринга удалите строку выше и замените на:

if (this.state.projects.length === 0){ return <div>Loading</div> } Так, когда изначально ваш компонент будет запущен, он будет на доли секунды отображать загрузочный div, а когда ваш массив заполнится вашим компонентомВаш массив будет обработан.