我是新來的整個生態系統，我不知道爲什麼在在我的例子組件渲染功能this.state.displayedListItems是一個字符串數組，符合市場預期，但filterList函數內部this.state.displayedListItems是不確定的？TSX與成員國分歧

我使用

Atom 1.0.2 (https://atom.io/) 
atom-typescript 5.0.29 (https://github.com/TypeStrong/atom-typescript), 

tsd 0.6.3 with 
"react/react.d.ts": { "commit": "a9c59f8166b4d7f1e8c4309a506987c2e6d78b5e"}, 
"react/react-jsx.d.ts": {"commit": "a9c59f8166b4d7f1e8c4309a506987c2e6d78b5e"} 

OSX Yosemite 10.10.4

這裏是我的演示組件（掛載，請在搜索框中輸入一個字母，以得到一個警報中「未定義」）請注意，您必須滾動以下下面的代碼塊看到整個代碼]

/// <reference path="../typings/react/react.d.ts" /> 

interface FilterListTestPropsInterface 
{} 

interface FilterListTestStateInterface 
{ 
    completeListItems : string[]; 
    displayedListItems : string[]; 
} 

class FilterListTestState implements FilterListTestStateInterface 
{ 
    completeListItems : string[]; 
    displayedListItems : string[]; 
    constructor(allItems: string[], displayedItems: string[]) 
    { 
    this.completeListItems = allItems, 
    this.displayedListItems = displayedItems 
    } 
} 

class FilterListTest extends React.Component<FilterListTestPropsInterface, FilterListTestStateInterface> 
{ 
    constructor(props:FilterListTestPropsInterface) 
    { 
    super(props); 
    } 

    // hardcoded values for testing/exploration purpose 
    initialState : FilterListTestStateInterface = 
    { 
    completeListItems : ["Apples", "Broccoli", "Chicken", "Duck", "Eggs", "Fish", "Granola", "Bash Brownies"], 
    displayedListItems : [] 
    } 

    componentWillMount() 
    { 
    this.setState(new FilterListTestState(this.initialState.completeListItems, this.initialState.completeListItems)); 
    } 

    filterList(event : React.SyntheticEvent) //used event:any then event.constructor.name to find the type 
    { 
alert(this.state + ' ' + this.state.displayedListItems); // debug result is object + undefined 
    var input : HTMLInputElement = event.target as HTMLInputElement; 
    var updatedList = this.state.completeListItems.filter 
    (
     function(item) 
     { 
     return item.toLowerCase().search(input.value.toLowerCase()) !== -1; 
     } 
    ); 
    this.setState 
    (
     { 
     completeListItems : this.initialState.completeListItems, 
     displayedListItems : updatedList 
     } 
    ); 
    } 

// here, state this.state.displayedListItems has the right values 
    render() 
    { 
    return (
     <div className="filter-list"> 
     <input type="text" placeholder="Search" onChange={this.filterList}/> 
     <FilterableList items={this.state.displayedListItems}/> 
     </div> 
    ); 
    } 
} 

class FilterableList extends React.Component<any, any> 
{ 
    constructor(props:any) 
    { 
    super(props); 
    } 

    render() 
    { 
    return (
     <ul> 
     { 
     this.props.items.map 
     (
      function(item) 
      { 
      return <li key={item}>{item}</li> 
      } 
     ) 
     } 
     </ul> 
    ); 
    } 
}; 

// mount this into a html doc with something like 
// React.render(<FilterListTest/>, document.getElementById('ReactContent'));

由於

來源

2015-07-20 Dom

常見錯誤。這是由於的方式this作品在JavaScript

修復

變化filterList(event : React.SyntheticEvent) {到filterList = (event : React.SyntheticEvent) => {

來源

2015-07-21 02:45:30 basarat

真棒，謝謝。（如果這是常見的話，如果編譯器可以給出警告，這將是很好的） – Dom

這個JavaScript在JavaScript中是很好的。 – basarat

TSX與成員國分歧

回答

修復

相關問題