関数にsetstateを返す

Question

"getcontent"に "onchange"に反応するurlパラメータをどのように送信できますか？ 私は多くの時間を試して、私は傾ける！私は..のonChange関数にURLパラメータを取得してのgetContent関数に送信

申し訳ありませんが、私の下手な英語

class FetchDemo extends React.Component { 

    constructor(props) { 
    super(props); 

    this.state = { 
     posts: [], 

     urlx: '' 
    }; 

    getContent(url) { 

     axios 
      .get(url) 
      .then(res => { 
      const posts = res 
       .data 
       .Links 
       .map(obj => obj); 
      this.setState({ posts: posts, urlx: url }); 

      console.log('posts', posts); 
      }) 
      .catch(error => { 
      console.log('Error fetching and parsing data', error); 
      }); 

     } 

onChange(e) { 
     let myHistory = []; 

     let self = this 
     let index = self 
      .select() 
      .index(); 
     let dataItem = self 
      .dataSource 
      .view()[index]; 
     let urlb= dataItem.PlayList; 

     if (urlb) { 

      let grid = $("#listView").data("kendoListView"); 


      myHistory.push(dataItem); 


     } 

     // send urlb to getContent ????? 
     } 

//たい...... ...

Answer 1

限られたコード例で何が起こっているのかを正確に伝えるのは少し難しいですが、ac ouple things：

1. コンストラクタ内にgetContent(url)を入れないでください。
2. あなたのコンストラクタでバインドgetContent（ this以降は、あなたのコンストラクタで拘束され、動作します）使用して、変数と

3. コールthis.getContent。

   class FetchDemo extends React.Component { 
       constructor(props) { 
       super(props); 
   
       this.state = { 
        posts: [], 
        urlx: '', 
       }; 
       // bind your function to this 
       this.getContent = this.getContent.bind(this); 
       }; 
   
       getContent(url){ 
       axios 
        .get(url) 
        .then(res => { 
        const posts = res.data.Links.map(obj => obj); 
        this.setState({ posts: posts, urlx: url }); 
        console.log('posts', posts); 
        }) 
        .catch(error => { 
        console.log('Error fetching and parsing data', error); 
        }); 
       }; 
   
       onChange(e) { 
       let myHistory = []; 
       let self = this; 
       let index = self.select().index(); 
       let dataItem = self.dataSource.view()[index]; 
       let urlb = dataItem.PlayList; 
   
       if (urlb) { 
        let grid = $('#listView').data('kendoListView'); 
        myHistory.push(dataItem); 
        // call your internal function with hte variable 
        this.getContent(urlb); 
       } 
   
       } 
   
       render() { 
       return (
        ... 
       ); 
       } 
   } 
   

Answer 2

残念ながら、私は "this.getContentは関数ではありません" というエラー

私はすべてのコードを取得しています。

const linkTemplate = '<li id="Links" class="nav-item links"><img class="b-lazy" src="styles/image' + 
    's/texture1.jpg" data-src="#= images#" />#if (!StreamUrl){#<h2>#: Title#</h2>#}' + 
    ' else {#<h2 class="streamUrl">#: Title#</h2><i class="fa fa-play-circle-o fa-3' + 
    'x"></i><i class="hostCins">#=StreamUrl#</i>#}#</li>'; 



class FetchDemo extends React.Component { 

    constructor(props) { 
    super(props); 

    this.state = { 
     posts: [], 
     urlx: '' 
    }; 

    this.getContent = this.getContent.bind(this) 

    }; 

componentWillMount(){ 
    let linkx = this.state.urlx 
    if (linkx == '') { 
    linkx = 'http://example.com.json' 
    } 
    this.getContent(linkx); 
} 


    getContent(url) { 
    axios 
     .get(url) 
     .then(res => { 
     const posts = res 
      .data 
      .Linkx 
      .map(obj => obj); 
     this.setState({ posts: posts, urlx: url }); 

     console.log('posts', posts); 
     }) 
     .catch(error => { 
     console.log('Error fetching and parsing data', error); 
     }); 

    } 

    onDataBound(e) { 
    $$nav.on(); 

    $$nav.current($("#listView li").first()); 

    var grid = $("#listView").data("kendoListView"); 

    // $(".links").on("mouseover", function (event) { 
    // $(".links").hover(function() { 

    $(".nav-item.links").bind({ 
     nav_focus: function() { 
     var gridThis = grid.dataItem(this); 
     $(this).addClass('k-state-hover'); 

     if (gridThis) { 
      let rowData = gridThis.descp; 


      let rowDataTitle = gridThis.Title; 

      if (rowData) { 
      rowData = rowData.replace(/<\/?[a-z][a-z0-9]*[^<>]*>/ig, ""); 
      rowData = rowData 
       .replace("&nbsp;", "") 
       .replace("&#8230;", ""); 
      $(".Description_Content").text(rowData); 
      } 

     } 
     }, 
     nav_blur: function() { 
     $(this).removeClass('k-state-hover'); 

     } 
    }); 



    let bLazy = new Blazy(); 

    } 


    onChange(e) { 
    let myHistory = []; 
    let timem = 0; 


    let self = this 
    let index = self 
     .select() 
     .index(); 
    let dataItem = self 
     .dataSource 
     .view()[index]; 
    let Linkx = dataItem.PlayList; 


    if (Linkx) { 

     let grid = $("#listView").data("kendoListView"); 


     myHistory.push(dataItem); 


     this.getContent(Linkx); 

    } 

    }; 


    render() { 


    let dataSourcem = new kendo 
     .data 
     .DataSource({ data: this.state.posts, pageSize: 6, page: 1 }); 

    $("#listView").kendoListView({ 
     dataSource: dataSourcem, template: linkTemplate, dataBound: this.onDataBound, change: this.onChange, selectable: "single" 
     // autoBind: false, dataBinding: function (result) { console.log("databindinten: 
     // ",result);}, requestStart: onRequestStart, requestEnd: onRequestEnd 
    }) 

    return (
     <div> 
     <h1>{this.props.subreddit}</h1> 
     <div> </div> 
     <div id="listView" /> 
     <ul> 
      {this 
      .state 
      .posts 
      .map(postx => <li>{postx.Title}</li>)}} 
     </ul> 
     </div> 
    ); 
    } 
} 

ReactDOM.render(
    <FetchDemo subreddit="reactjs" />, document.getElementById('root'));