我在react中创建了一个简单的列表类组件,出于某种原因,当值更新或点击要添加到列表的按钮时,它会添加上一个值而不是当前值.例如,如果文本区域中有"",然后我输入"e"使文本区域值为"e",然后按add.它将添加""而不是"e".只有在我再次点击add后,它才会显示"e",但这是因为这是新的前一个值.当我try 在控制台中测试状态已经更新后,它仍然保持相同的值,我不知道为什么,因为由于顺序,它应该更新之前显示.我可能会解释这个可怕的,裸着我,我很难解释问题.

class List extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      listValue: '',
      listAdd: ''
    }

    this.handleList = this.handleList.bind(this);
    this.addValue = this.addValue.bind(this);
  }

  handleList(){
    this.setState({
      listAdd: this.state.listValue
    })
    this.addList(this.state.listAdd);
  }

  addValue(event){
    this.setState({
      listValue: event.target.value
    })
    console.log(this.state.listValue);
  }

  addList(value){
    const node = document.createElement("li");
    const textnode = document.createTextNode(value);
    node.appendChild(textnode);
    document.querySelector(".listBox").appendChild(node);
  }

  render(){
    return(
      <div className="box1">
        <textarea className="textArea" maxLength={68} onChange={this.addValue}></textarea>
        <button className="submit" onClick={this.handleList}>Add</button>
        <ul className="listBox">

        </ul>
      </div>
    );
  }
}

推荐答案

这是由于setState()函数的异步性质.

handleList(){
    this.setState({
      listAdd: this.state.listValue
    })
    this.addList(this.state.listAdd);
}

在这段代码中,listAdd变量不会立即更新,因此先前存储的值被赋予addList函数.

为了解决这个问题,您可以将相同的listValue变量发送到addList,或者仅在listAdd更新后使用回调函数更新addList.

建议一:

handleList(){
    this.setState({
      listAdd: this.state.listValue
    })
    this.addList(this.state.listValue);
}

建议二:

handleList(){
    this.setState({
      listAdd: this.state.listValue
    },
    ()=>this.addList(this.state.listAdd)
}

这里我们给出了回调函数作为第二个参数,它只会在listAdd更新后执行

Javascript相关问答推荐

在NextJS中使用计时器循环逐个打开手风琴项目?

成帧器运动中的运动组件为何以收件箱开始?

如何为GrapesJS模板编辑器创建自定义撤销/重复按钮?

django无法解析余数:[0] from carray[0]'

使用下表中所示的值初始化一个二维数组

togglePopover()不打开但不关闭原生HTML popover'

未捕获错误:在注销后重定向到/login页面时找不到匹配的路由

React 17与React 18中的不同setState行为

在nextjs服务器端api调用中传递认证凭证

如何解决useState错误—setSelect Image不是函数''

提交链接到AJAX数据结果的表单

TypeError:无法分解';React2.useContext(...)';的属性';basename';,因为它为空

使用类型:assets资源 /资源&时,webpack的配置对象&无效

Google脚本数组映射函数横向输出

Next.js中的服务器端组件列表筛选

使用jQuery find()获取元素的属性

表单数据中未定义的数组键

在Puppeteer中使用promise进行日志(log)记录时出现TargetCloseError

对不同目录中的Angular material 表列进行排序

Reaction-在同一页内滚动导航(下拉菜单)