未能添加項目和更新狀態是react.js

我無法發現代碼有什麼問題。我通過道具傳遞狀態，newItem確實通過了，但我沒有更新Todos組件的狀態。未能添加項目和更新狀態是react.js

class AddTodo extends React.Component { 
    constructor(){ 
    super(); 
    this.state = {text: ''}; 
    } 
    onTextChanged(e){ 
    this.setState({text:e.target.value}); 
    } 
    addHandler(){ 
    this.props.addTodo(this.state.text); 
    } 
    render() { 
    return(
     <div> 
     <input type="text" onChange={(e)=>this.onTextChanged(e)} /> 
     <button onClick={()=>this.addHandler()}>Add</button> 
     </div> 
    ) 
    } 
} 

class Todos extends React.Component { 
    constructor(){ 
    super(); 
    this.state = {data: ['write book','wash clothes','jogging']}; 
    } 
    addTodo(item){ 
    const newData = [...this.state.data, item]; //problem is here 
    this.setState({ data: newData }); //problem is here 
    console.log(this.state.data) 
    } 
    render() { 
    return (  
     <div> 
     <AddTodo addTodo={(item)=>this.addTodo(item)}/> 
     <ul> 
     {this.state.data.map((item)=><TodoItems key={item} item={item}/>)} 
     </ul> 
     </div> 
    ); 
    } 
}

http://jsbin.com/nitibinale/1/edit?html,js,console,output

來源

2017-01-09 Thian Kian Phin

你如何將'AddTodo'函數綁定到實例？我看到匿名函數，但是'this'將會是錯誤的值。控制檯中的任何東西？您採取了哪些步驟進行調試？ –

@DaveNewton爲什麼我需要綁定？ es6的箭頭功能不在這裏完成任務嗎？ –

@DaveNewton http://jsbin.com/pajoliboqi/1/edit不工作，如果我不使用es6 –

你的代碼是正確的，這可能是與JSBin的錯誤，以及如何處理transpilation與巴貝爾

class AddTodo extends React.Component { 
 
    constructor(){ 
 
    super(); 
 
    this.state = {text: ''}; 
 
    } 
 
    onTextChanged(e){ 
 
    this.setState({text:e.target.value}); 
 
    } 
 
    addHandler(){ 
 
    this.props.addTodo(this.state.text); 
 
    } 
 
    render() { 
 
    return(
 
     <div> 
 
     <input type="text" onChange={(e)=>this.onTextChanged(e)} /> 
 
     <button onClick={()=>this.addHandler()}>Add</button> 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

 
class Todos extends React.Component { 
 
    constructor(){ 
 
    super(); 
 
    this.state = {data: ['write book','wash clothes','jogging']}; 
 
    } 
 
    addTodo(item){ 
 
    const newData = [...this.state.data, item]; //problem is here 
 
    this.setState({ data: newData }); //problem is here 
 
    console.log(this.state.data) 
 
    } 
 
    render() { 
 
    return (  
 
     <div> 
 
     <AddTodo addTodo={(item)=>this.addTodo(item)}/> 
 
     <ul> 
 
     {this.state.data.map((item)=><TodoItems key={item} item={item}/>)} 
 
     </ul> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
class TodoItems extends React.Component { 
 
    constructor(props){ 
 
    super() 
 
    this.state = { 
 
     text: props.item, 
 
     isEditing: false 
 
    }; 
 
    } 
 
    onClickEdit(){ 
 
    this.setState({isEditing: !this.state.isEditing}); 
 
    } 
 
    onSaveEdit(e){ 
 
    this.setState({ 
 
     isEditing: false, 
 
     text: this.state.text 
 
     }); 
 
    } 
 
    onTextChanged(e){ 
 
    this.setState({text: e.target.value}); 
 
    } 
 
    onEnter(e){ 
 
    if(e.charCode === 13){ 
 
     this.setState({ 
 
     isEditing: false, 
 
     text: this.state.text 
 
     }); 
 
    } 
 
    } 
 
    render(){ 
 
    return(
 
     <div> 
 
     
 
     <li> 
 
     {this.state.isEditing ? '' : <span>{this.state.text}</span>} 
 

 
     {this.state.isEditing ? <span><input value={this.state.text} onKeyPress={(e)=>this.onEnter(e)} 
 
    type="text" onChange={(e)=>this.onTextChanged(e)}/></span> :''} 
 
    &nbsp;&nbsp; 
 
     {this.state.isEditing ? '' : <button onClick={()=>this.onClickEdit()}>Edit</button>} 
 

 
     {this.state.isEditing ? <button onClick={()=>this.onSaveEdit()}>Save</button> : ''} 
 
     </li> 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

 
React.render(
 
    <Todos />, 
 
    document.getElementById('react_example') 
 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script> 
 
<div id="react_example"></div>

來源

2017-01-09 16:56:32

-1

你的問題有兩個部分：

1- You forgot to set the variable in setState 
2- You have a problem with your ItemTodo

我只是固定在你的文件，檢查出來。 http://jsbin.com/pajoliboqi/1/edit?js,console,output

來源

2017-01-09 16:29:35 damianfabian

你的鏈接不起作用 –

看看這個：https://jsfiddle.net/0mhvbnhx/

class AddTodo extends React.Component { 
    constructor(){ 
    super(); 
    this.state = {text: ''}; 
    } 
    onTextChanged(e){ 
    this.setState({text:e.target.value}); 
    } 
    addHandler() { 
    this.props.addTodo(this.state.text); 
    this.setState({ text: '' }); 
    } 
    render() { 
    return(
     <div> 
     <input type="text" value={this.state.text} onChange={(e)=>this.onTextChanged(e)} /> 
     <button onClick={()=>this.addHandler()}>Add</button> 
     </div> 
    ) 
    } 
} 

class Todos extends React.Component { 
    constructor(){ 
    super(); 
    this.state = { 
     data: ['write book','wash clothes','jogging'] 
    }; 
    } 
    addTodo = (item) => { 
    const data = [...this.state.data, item]; 
    this.setState({ data }); 
    } 
    changeTodo = (i, text) => { 
    const data = [...this.state.data]; 
    data[i] = text; 
    this.setState({ data }); 
    } 
    render() { 
    return (  
     <div> 
     <AddTodo addTodo={this.addTodo}/> 
     <ul> 
     {this.state.data.map((item, i)=> 
      <TodoItems key={i} index={i} item={item} changeTodo={this.changeTodo}/> 
     )} 
     </ul> 
     </div> 
    ); 
    } 
} 

class TodoItems extends React.Component { 
    constructor(props){ 
    super() 
    this.state = { 
     isEditing: false, 
     text: '', 
    }; 
    } 
    onClickEdit(){ 
    this.setState({isEditing: !this.state.isEditing, text: this.props.item}); 
    } 
    onSaveEdit(){ 
    this.props.changeTodo(this.props.index, this.state.text); 
    this.setState({ 
     isEditing: false, 
    }); 
    } 
    onTextChanged(e){ 
    this.setState({text: e.target.value}); 
    } 
    onEnter(e) { 
    if(e.charCode === 13){ 
     this.onSaveEdit(); 
    } 
    } 
    render(){ 
    return(
     <div> 

     <li> 
     {this.state.isEditing ? '' : <span>{this.props.item}</span>} 

     {this.state.isEditing ? <span><input value={this.state.text} onKeyPress={(e)=>this.onEnter(e)} 
    type="text" onChange={(e)=>this.onTextChanged(e)}/></span> :''} 
    &nbsp;&nbsp; 
     {this.state.isEditing ? '' : <button onClick={()=>this.onClickEdit()}>Edit</button>} 

     {this.state.isEditing ? <button onClick={()=>this.onSaveEdit()}>Save</button> : ''} 
     </li> 
     </div> 
    ) 
    } 
} 

React.render(
    <Todos />, 
    document.getElementById('react_example') 
);

來源

2017-01-09 16:35:28

這工作，但你增加了一個我認爲不需要的功能。 –

@JennyMok哪一個？ –

changeTodo，爲什麼你需要這個？ –

我相信Shubham在他的回答中是正確的。如果您從相關問題中查看answer，則會發現您可能需要在頂部添加// noprotect附註，以便JS Bin能夠正常工作。你的代碼工作正常。

旁白：你可能要考慮使用的setState（link）回調的版本，因爲它是異步的，this.state可能並不總是一致的，如果你訪問它，你目前的方式。

來源

2017-01-09 17:36:17 jfairbank