Нужен способ отправки данных response.body с express (сервер. js) в React (клиент. js) - PullRequest
Новая
       14

Нужен способ отправки данных response.body с express (сервер. js) в React (клиент. js)

0 голосов
/ 07 марта 2020

Я работаю над проектом, в котором я предоставляю конечную точку отдыха (POST), чтобы бэкэнд мог отправить тело ответа обратно в мое приложение реагирования. Затем я должен создать страницу HTML и отправить ее HTML обратно в бэкэнд-команду. Теперь, когда мое приложение реагирования не знает, когда сервер будет отправлять данные, я сначала получаю пустую страницу, когда запускаю ее на локальном компьютере, так как данных еще нет. После того, как я проверил эту конечную точку, используя почтальон, добавив некоторое содержимое в тело и нажав «Отправить», мой express (сервер. js) может получить данные, и я могу использовать console.log (data), но не могу отправить его обратно реагирующему клиенту.

Помощь очень ценится!

сервер. js

server.post('/test', urlencodedParser, function(request, response) {
    request.accepts('application/json');
    const reqBody = request.body;
    console.log(reqBody); // I am able to get the data here.

app. js

export class App extends Component {
    componentDidMount = () => {
        this.props.actions.getInitialData(); // The actions.js has the end point information.
         console.log(this.props.initialData); // This is where I need to read the data for me to construct an HTML page which I can't
    }

    render() {
        return (
            <React.Fragment>
                <div className={Styles.container} data-test="appComponent">
                    <header>
                        <h1>(Demo Data)</h1>
                    </header>
                    <Page /> 
                </div>
            </React.Fragment>
        );
    }
}

App.propTypes = {
    initialData: propTypes.object,
    actions: propTypes.object,
};

const mapStateToProps = state => ({
    initialData: state.initialData,
});

function mapDispatchToProps(dispatch) {
    return {
        actions: bindActionCreators(KspActions, dispatch)
    };
}

export default connect(mapStateToProps, mapDispatchToProps)(App);

Вот скриншоты express против клиентского браузера.]

express js

Я вижу данные в консоли, как только я отправляю данные с помощью почтальона

браузер

[Я не вижу никаких данных в браузере клиента]

действия. js

export function getInitialData() {
    return function(dispatch) {
        const url = `${INTERNAL_ROUTES.KSP_URL}`; // this is '/test' route

        return axios.post(url)
            .then(response => {
                const respData = response.data;
                console.log(respData); // Not able to console.log the data on update from the backend
            }).catch(error => {
                console.log(error);
            });
    };
}

редуктор. js

case types.GET_KSP_DATA: {
            return {
                ...state,
                kspData: [...state.kspData, action.data]
            };
        }

1 Ответ

0 голосов
/ 07 марта 2020

Вы можете использовать fetch, чтобы запросить конечную точку из приложения веб-интерфейса, получить ее и отобразить данные в виде sh в вашем приложении.

Так что-то вроде этого : 

// actions.js (or where-ever your actions are defined)
getInitialData() {
return fetch('http://path.to/endpoint', {
  method: 'POST',
  body: {}
  headers: { 'Content-Type': 'application/json' }
}).then(response => response.json())
  .then(data => {
    return dispatch({ type: 'INITIAL_DATA', data)
  })
}

Редуктор: 

const initialDataReducer = (initialState = {}, action) => {
  switch(action.type) {
    case 'INITIAL_DATA':
       return {
         ...state,
         ...action.data // NEVER use ... to spread return data, it gets messy and confusing. This is just an example.
       }
    }
}

при условии, что ваш редуктор подключен к вашему приложению / компоненту, вы должны иметь возможность передавать данные в компонент. Следует отметить, что componentDidMount не будет иметь данных, так как вы вызываете действие там, а componentDidMount запускается только один раз. Вместо этого componentDidUpdate получит изменения: 

componentDidUpdate(prevProps) {
  if (this.props.initialData != prevProps.initialData) {
    console.log(this.props.initialData)
  }
}

Очевидно, что здесь есть некоторые недостающие вещи / грубые края, но я надеюсь, что вы поняли идею.

...