javascript - 为什么 React 的 UI 组件没有更新?

标签 javascript reactjs

这更多的是一个概念问题,而不是错误修复。

我对 react 相当陌生,并试图构建一个具有添加和删除功能的简单待办事项应用程序。我实现了一个功能,每当单击待办事项列表元素时,它就会被删除。我用 CSS 设计了它的样式并设置了边框。

这里的主要问题是,每当我单击列表中的元素时,它就会消失,但边框仍然存在。只是文本消失,而不是整个 div。

这是 App.js 代码

import React, { Component } from 'react';
import './App.css';
import Navbar from './Navbar/Navbar' 
import InputBox from './inputBox/inputBox'; 
import ListTodo from './listTodo/listTodo';

class App extends Component {

  constructor(props){
    super(props)
    console.log("This is from the constuor");
    this.state={
      todo:[

      ],
      temp:''
    }
  }

  changed=(thing)=>{
    var x =  thing.target.value;
    this.setState({
      temp:x
    })
  }

  addTodo = ()=>{
    const item = [
      ...this.state.todo
    ]
    item.push(this.state.temp);
    this.setState({
      todo:item
    })
  }

  removeIt = (index)=>{
    const item = [
      ...this.state.todo
    ]
    delete item[index]
    this.setState({
      todo:item
    })
  }

  render() {
    return (
      <div className="change">
      <Navbar/>
        <InputBox
        changed={(event)=>this.changed(event)}
        addTodo = {this.addTodo}
        />
        <ListTodo 
        todoList = {this.state.todo}
        removeIt = {this.removeIt}
        />
      </div>
    );
  }
}

export default App;

我的输入框组件:

    import React from 'react';
import {Button} from 'react-bootstrap'; 
import './inputBox.css'

const inputBox = (props)=>{

 const keyPress=(e)=>{
        if(e.keyCode === 13){
           console.log('value', e.target.value);
           props.addTodo();
        }
     }
    return(
        <div className="center">
            <input className="inputDis" type="text" key='1' onChange={props.changed} onKeyDown={keyPress}/>
            <Button className="buttonDis" bsStyle="info" key='2' onClick={props.addTodo}>Info</Button>
        </div>
    )
}
export default inputBox

我的待办事项列表组件:

import React from 'react';
import {Button} from 'react-bootstrap'; 
import './listTodo.css'
const displayTodo = (props)=>{

  const items = props.todoList.map((item, index)=>{
      return(
        <div key={index+"upper"} onClick={()=>props.removeIt(index)} className="listTodo">
           <span key={index+"div"}>{item}</span>
            {/* <Button onClick={()=>props.removeIt(index)} bsStyle="info" key='remove'>X</Button>  */}
           </div>
           )})

    return (
      <div>{items}</div>
      );
}


export default displayTodo

我真的不明白如何让这个东西工作。这是 UI 图像 this is while updating the list and this is happening while removing

最佳答案

您的 removeIt 代码是问题所在,您复制所有元素,然后删除特定索引处的值,使其未定义(一个洞),因此它由 todoList.map 呈现...

removeIt = (index)=>{
  const item = [
    ...this.state.todo
  ]
  delete item[index]
  this.setState({
    todo:item
  })
}

常见的约定是过滤索引等于您要删除的元素的所有元素

removeIt = (index)=>{
  const newItems = this.state.items.filter((el, elIndex) => elIndex !== index);
  this.setState({
    todo: newItems
  })
}

const data = [1,2,3,4,5,6];

// delete method
const data1 = [...data];
delete data1[3]; // delete index 3
console.log(data1); // [1,2,3,undefined,5,6]

// filter method
const data2 = [...data].filter((el, index) => index !==3); // filter index 3 out
console.log(data2); // [1,2,3,5,6]

关于javascript - 为什么 React 的 UI 组件没有更新?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54167460/

相关文章:

javascript - 如何计算动态 Canvas 上文本对象的边界框

javascript - 来自 React 组件的异步/等待调用操作

reactjs - 将 react router V6 导航与 redux 和 redux thunk 操作一起使用的最佳方法是什么?

reactjs - 如何创建可重用的异步 thunk 而无需不必要的渲染

javascript - 如何向具有子项的菜单元素添加箭头?

javascript - 使用 React-Admin/Material UI 的文本字段保留换行符?

javascript - 在同一个ajax调用中上传和下载图像值得吗?

javascript - 如何创建一个主动切换变量的循环?

javascript - 使用 javascript 验证用户输入日期是否在给定的日期范围内

javascript - 类型具有单独的私有(private)属性声明