ReactJS - Ключи объекта - Вложенные ключи / значения

Я пытаюсь получить определенные значения из файла JSON. Я прикрепляю данные к компоненту, который затем передается через функцию getProjectsList, которая затем должна искать определенный файл JSON и отображать эти данные в элементе списка.

Это мой компонент

class OpenProjectsHome extends React.Component {
    constructor () {
        super();

        this.getProjectList = this.getProjectList.bind(this);
    }

    getProjectList(project) {
        var projectNameFile = openProjectsData[project]
        var url = window.location.protocol + "//" + window.location.host + "/open-projects/" + projectNameFile;


        let clientName = "";
        let projectName = "";
        var startDate = "";
        var component = this;

        var jqxhr = $.get( url, function(myData) {
            // console.info(myData)
            console.info(myData[0].Client)
            console.info(myData[0].Project)
            console.info(myData[0].StartDate)
            clientName = myData[0].Client
            projectName = myData[0].Project
            startDate = myData[0].StartDate
          })
        .fail(function() {
            alert( "error" );
        });

        var projectURL = "project? = " + projectName;

        return (
            <li>
                <a href = {projectURL} title = "">
                    <h6 className = "eyebrow">{clientName}</h6>
                    <h6>{projectName}</h6>
                    <span><strong>Started:</strong> {startDate}</span>
                </a>
            </li>
        )
    }
    render() {
        return(
            <section className = "project-lists project-lists--current">
                <div className = "panel">
                    <div className = "panel__header">
                        <h4 className = "panel__title">Open Projects</h4>
                    </div>
                    <div className = "panel__content">

                        <ul className = "unordered-list">
                            {/* /////
                            ///// WORKS
                            ///// */}
                            {Object.keys(this.props.data).map(this.getProjectList)}
                        </ul>

                    </div>
                </div>
            </section>
        );
    }
}

Его рендеринг выводит два <li>, но все мои переменные clientName, ProjectName, StartDate рендерится как null внутри возврата (console.info в $ .get работает)

Любая помощь будет принята с благодарностью.

ответ на ваш вопрос .. stackoverflow.com/a/16825593/10039122

— 31.10.2018 14:25

json ajax reactjs

31.10.2018 14:21

Как сделать HTTP-запрос в Javascript?

В JavaScript вы можете сделать HTTP-запрос, используя объект XMLHttpRequest или более новый API fetch. Вот пример для обоих методов:

Ответы 1

вы должны использовать setState и функцию axios и стрелки

         var jqxhr =axios.get(url, (myData)=>{
        // console.info(myData)
        this.setState({
        clientName : myData[0].Client,
        projectName : myData[0].Project,
        startDate = myData[0].StartDate
        })
        console.info(myData[0].Client)
        console.info(myData[0].Project)
        console.info(myData[0].StartDate)

      })
    .fail(function() {
        alert( "error" );
    });

axios doc https://github.com/axios/axios

Привет, спасибо за информацию @yasin, но у меня все еще есть проблемы, я добавил аксиомы с помощью CDN, а затем добавил этот код в свой компонент, но он все еще не работает, я удалил ошибку, так как он дает мне ошибку, поэтому я не буду отображать что-нибудь. и мои журналы консоли больше не работают.

— 31.10.2018 14:56

О, я добавил this.state = {clientName: "", projectName: "", startDate: ""}; конструктору тоже

— 31.10.2018 15:08

31.10.2018 14:29