Component Mounting для проверки параметра url перед представлением рендеринга в ReactJs

Question

В моем приложении react мне нужно проверить параметр id в URL-адресе, а затем визуализировать представление соответственно (то есть разные представления в случае успешной и неудачной проверки). Вот пример кода:

routes.js

// just relevant lines of code: 
import React from 'react'; 
import { Route, IndexRoute } from 'react-router'; 
import Foo from '../containers/foo'; 

const AppRoutes = (
    <Route component={Base} path="/"> 
    <Route component={Foo} path="/url/:id"/> 
    </Route> 
); 
export default AppRoutes;  

класса Foo

import React, { Component } from 'react'; 
import { isValid } from '../service';  

class Foo extends Component { 
    state = { 
    check : true 
    } 
    componentWillMount(){ 
    if (isValid(this.props.params.id) == false || 'undefined') { 
     console.log(isValid(this.props.params.id)); 
     this.setState({ 
     check : false 
     }); 
    } 
    } 
    render() { 
    if (!this.state.check){ 
     return(...); 
    }else{ 
     return(...); 
    } 
    }; 
} 
export default Foo; 

service.js

"use strict"; 
function createCORSRequest(method, url) { 
    var xhr = new XMLHttpRequest(); 
    if ("withCredentials" in xhr) { 
    // XHR for Chrome/Firefox/Opera/Safari. 
    xhr.open(method, url, true); 
    } else if (typeof XDomainRequest != "undefined") { 
    // XDomainRequest for IE. 
    xhr = new XDomainRequest(); 
    xhr.open(method, url); 
    } else { 
    // CORS not supported. 
    xhr = null; 
    } 
    return xhr; 
} 

function fetchId(method, url, id, callback){ 
    var xhr = createCORSRequest(method, url); 
    if (!xhr) return; 
    xhr.addEventListener("readystatechange", callback); 
    xhr.setRequestHeader("content-type", "application/json"); 
    xhr.send(JSON.stringify(query)); 
} 

function isValid(id){ 
    let url = 'https://some/api/url/'; 
    return fetchId('POST', url, id, function(){ 
    return (this.readyState===4 && this.responseText.length>0) ? true : false; 
    }); 
} 
export default {isValid} 

Сейчас console.log(isValid(this.props.params.id) в componentWillMount() всегда печатает undefined, независимо от того, id действителен или нет. Кажется, могут быть две проблемы: либо я неправильно возвращаю логический ответ isValid(), либо ошибочно использую componentWillMount(). Я тоже подумал о docs и узнал, что componentWillMount() фактически запускается до render().

Может ли кто-нибудь указать на реальную проблему и исправить меня, где я делаю неправильно?

Answer 1

Непонятно, что называется компонентом Foo. Но похоже, что у вас отсутствует конструктор в классе Foo.

class Foo extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { check : true }; 
    } 
    componentWillMount() { 
    console.log(this.props.params.id); 
    } 
    render() { 
     //... 
    } 
} 

См. React State Docs для получения дополнительной информации.

Answer 2

Похоже, вы пытаетесь выполнить условный рендеринг. Я столкнулся с этой проблемой, когда обучение реагирует самостоятельно (предположим, что это то, что вы ищете). Если это так, то это, как вы бы это сделать:

---

---

Так, в приведенном выше блоке кода, вы могли бы сделать какие-то проверки состояния, чтобы увидеть, если this.props.params .id === «некоторая строка», а затем, когда это правда, она отобразит первый набор div.

Сообщите мне, если это не работает или вы ищете другое решение!

Answer 3

Примечание: Я не уверен, что остальная часть вашего XMLHttpRequest работает, поскольку я никогда не работал с ней напрямую, используя библиотеки, чтобы управлять им для меня, как выборка или аксиомы.

Вопрос в вашем действительном методе.

function isValid(id){ 
    let url = 'https://some/api/url/'; 
    return fetchId('POST', url, id, function(){ 
    return (this.readyState===4 && this.responseText.length>0) ? true : false; 
    }); 
} 

вопрос является возвращение логического значения внутри функции, а функция isValid фактически возвращает результат функции fetchId (который не возвращает ничего, поэтому вы регистрируете undefined).

Почему это происходит?

Ну, ваш запрос выполнен в фоновом режиме и не блокирует выполнение. Поэтому в конце вашей функции isValid у нее нет возвращаемого логического значения.

Что вы можете сделать?

Функция isValid должна принимать обратный вызов для задержки его установки состояния до завершения запроса, аналогично функции fetchId.

function isValid(id, callback){ 
    let url = 'https://some/api/url/'; 
    fetchId('POST', url, id, function(){ 
    callback(this.readyState===4 && this.responseText.length>0) 
    }); 
} 

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

componentWillMount(){ 
    isValid(this.props.params.id, valid => { 
    if (!valid) { 
     console.log(isValid(this.props.params.id)); 
     this.setState({ 
     check : false 
     }); 
    } 
    }); 
} 

Но у меня есть обратные вызовы внутри обратных вызовов и его все становится слишком трудно следовать!

Вы не ошибаетесь. Эти виды взаимодействий становятся очень грязными, если вы пытаетесь полностью их выполнять внутри своего реагирующего компонента. Вы можете легко отделить свои заботы от государственного управления, действий и взглядов, используя redux и react-redux.