javascript - 为什么 react 的 UI 组件没有得到更新？

Question

这更像是一个概念性问题，而不是错误修复。

我对 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 图像

Answer 1

您的 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]