コンポーネントReactJsでレンダリングする前にurlパラメータを検証するようにマウントする

Question

私のreactのアプリケーションでは、URLにパラメータidを検証し、それに応じてビューをレンダリングする必要があります。ここではサンプルコードです：

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} 

今が有効であるかどうかにかかわらず、undefinedは常にcomponentWillMount()のに印刷されます。 2つの問題があるようですが、私はブール値レスポンスを正しく返していないか、あるいは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 === 'some string'とし、それが真であれば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; 
    }); 
} 

問題は、boolean型の戻り値が関数の内部で、isValid機能は、実際に（したがって、あなたがundefinedをログに記録され、何も返さない）fetchId関数の結果を返しています。

どうしてですか？

あなたのリクエストはバックグラウンドで実行され、実行をブロックしません。したがって、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を使用すると、州の管理、行動、意見の懸念を簡単に区別できます。