Javascript 添加项目失败，更新状态为react.js

我看不出代码有什么问题。我通过道具传递状态，新项目确实传递了，但我未能在

Todos

组件中更新状态

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>
    ); 
  }
}

类AddTodo扩展React.Component{
构造函数（）{
超级（）；
this.state={text:'}；
}
onTextChanged（e）{
this.setState（{text:e.target.value}）；
}
addHandler（）{
this.props.addTodo（this.state.text）；
}
render（）{
返回(
this.onTextChanged（e）}/>
this.addHandler（）}>Add
)
}
}
类Todos扩展了React.Component{
构造函数（）{
超级（）；
this.state={数据：[‘写书’、‘洗衣服’、‘慢跑’]}；
}
addTodo（项目）{
const newData=[…this.state.data，item]；//问题在这里
this.setState（{data:newData}）；//问题就在这里
console.log（this.state.data）
}
render（）{
报税表（
您的问题分为两部分：

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

我刚修复了你的文件，请查看。
看看这个：

类AddTodo扩展React.Component{
构造函数（）{
超级（）；
this.state={text:'}；
}
onTextChanged（e）{
this.setState（{text:e.target.value}）；
}
addHandler（）{
this.props.addTodo（this.state.text）；
this.setState（{text:'}）；
}
render（）{
返回(
this.onTextChanged（e）}/>
this.addHandler（）}>Add
)
}
} 
类Todos扩展了React.Component{
构造函数（）{
超级（）；
此.state={
数据：[“写书”、“洗衣服”、“慢跑”]
};
}
addTodo=（项目）=>{
const data=[…this.state.data，item]；
this.setState（{data}）；
}
changeTodo=（i，text）=>{
const data=[…this.state.data]；
数据[i]=文本；
this.setState（{data}）；
}
render（）{
报税表（

{this.state.data.map（（项，i）=>
)}

); 
}
}
类TodoItems扩展了React.Component{
建造师（道具）{
超级（）
此.state={
i编辑：错，
文本：“”，
};
}
onClickEdit（）{
this.setState（{isEditing:！this.state.isEditing，text:this.props.item}）；
}
onSaveEdit（）{
this.props.changeTodo（this.props.index，this.state.text）；
这是我的国家({
i编辑：错，
});
}
onTextChanged（e）{
this.setState（{text:e.target.value}）；
}
欧内斯特（e）{
如果（e.charCode===13）{
这个.onSaveEdit（）；
}
}
render（）{
返回(

{this.state.isEditing？''：{this.props.item}
{this.state.isEditing？this.onEnter（e）}
type=“text”onChange={（e）=>this.onTextChanged（e）}/>：“”
{this.state.isEditing？''：this.onClickEdit（）}>Edit}
{this.state.isEditing？this.onSaveEdit（）}>保存：“”

)
}
}
反应(
,
document.getElementById（'react\u example'）
);
您的代码是正确的，这可能是JSBin的一个错误，以及它如何处理Babel的传输


类AddTodo扩展React.Component{
构造函数（）{
超级（）；
this.state={text:'}；
}
onTextChanged（e）{
this.setState（{text:e.target.value}）；
}
addHandler（）{
this.props.addTodo（this.state.text）；
}
render（）{
返回(
this.onTextChanged（e）}/>
this.addHandler（）}>Add
)
}
}
类Todos扩展了React.Component{
构造函数（）{
超级（）；
this.state={数据：[‘写书’、‘洗衣服’、‘慢跑’]}；
}
addTodo（项目）{
const newData=[…this.state.data，item]；//问题在这里
this.setState（{data:newData}）；//问题就在这里
console.log（this.state.data）
}
render（）{
报税表（
this.addTodo（项目）}/>

{this.state.data.map（（项）=>）}

); 
}
}
类TodoItems扩展了React.Component{
建造师（道具）{
超级（）
此.state={
文本：props.item，
i编辑：错误
};
}
onClickEdit（）{
this.setState（{isEditing:！this.state.isEditing}）；
}
onSaveEdit（e）{
这是我的国家({
i编辑：错，
text:this.state.text
});
}
onTextChanged（e）{
this.setState（{text:e.target.value}）；
}
欧内斯特（e）{
如果（e.charCode===13）{
这是我的国家({
i编辑：错，
text:this.state.text
});
}
}
render（）{
返回(

{this.state.isEditing？''：{this.state.text}
{this.state.isEditing？this.onEnter（e）}
type=“text”onChange={（e）=>this.onTextChanged（e）}/>：“”
{this.state.isEditing？''：this.onClickEdit（）}>Edit}
{this.state.isEditing？this.onSaveEdit（）}>保存：“”

)
}
}
反应(
,
document.getElementById（'react\u example'）
)；
我相信Shubham的回答是正确的。如果你看一个相关问题的答案，你会发现你可能需要在顶部添加
//noprotect
pragma，JS Bin才能工作。你的代码工作得很好

旁白：您可能想考虑使用“代码> SETStest（）的回调版本）因为它是异步的，
这个。如果您以当前的方式访问它，状态可能并不总是一致的。
您如何将
AddTodo
函数绑定到实例？我看到了匿名函数，但是
这个
将是它们中的错误值。控制台中有任何内容吗？您采取了哪些步骤进行调试？@DaveNewton为什么我需要绑定？es6的arrow函数在这里不起作用？@DaveNewton如果我不使用es6也不起作用。这已经起作用了，但你添加了一个我认为不需要的函数。@JennyMok哪一个？changeTodo，为什么你需要它？@JennyMok我更改了父状态。也许将来你想将你的todo列表发送到服务器。在以前的varian中这是不可能的
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')
);