React:删除一个子级而不重新呈现父级

Question

我有一个parent component，其中显示了一个children列表。孩子们是文学Cards，每个card都有一个delete button。当我单击delete按钮时，会再次呈现整个父和子页面，因此会刷新整个页面。因此，如果我在文献卡片列表的底部(例如900张文学卡片)并删除最后一张文学卡片，页面就会刷新，因此我在页面的开头，而不是在页面的末尾(或者之前我在任何地方)。这有点烦人，因为我必须在删除一个子页面后向下滚动整个页面。

这基本上是我的父代码：

class ProjectLiterature extends Component {
  constructor(props) {
    super(props);

    this.state = {
      literatureEntries: [],
}}
getLiteratureEntries(){
axios.get(`http://127.0.0.1:5000/getLiterature`)
    .then(res => {

      const literatureEntries = res.data;
      this.setState({ literatureEntries })

    })
    }

deleteLiteratureEntry(id) {
    axios.delete("http://127.0.0.1:5000/deleteLiterature", {
      params: {
        id
      }
    })
      .then(res => {

        // get current literature entries after deleting one file
        this.getLiteratureEntries();
      })
      .catch(error => {
        console.log(error)
      })
  }

render() {
    const literatureEntries = this.state.literatureEntries
    return (
       {  literatureEntries.map((literature, index) => 
             return (
             <Literature literature={literature} key={literature._id}
             deleteLiteratureEntry={this.deleteLiteratureEntry.bind(this)} 
             project_name={this.state.projectName}/>
            )
          })
   }
)}

这基本上是我的孩子的组成部分：

export default class Literature extends Component {

    render() {
        const literature = this.props.literature
        return (
              <Card>
              <CardHeader>             
                   {literature.title}
                  <Button className="float-right" onClick={() => 
                       this.props.deleteLiteratureEntry(literature._id}
                   </Button>                       
              </CardHeader>    
              <CardBody>
                 ...
              </CardBody>
              </Card>
)}}

那么，我能做些什么吗?也许不是整个列表都被重新呈现了？

Answer 1

看起来在删除之后，您正在重新获取列表。因此，只需手动删除它，而不是重新获取整个列表。

deleteLiteratureEntry(id) {
    axios.delete("http://127.0.0.1:5000/deleteLiterature", {
      params: {
        id
      }
    })
      .then(res => {

        let newList = this.state.literatureEntries.filter(item => item.id !== id);
        this.setState({ literatureEntries: newList )}
      })
      .catch(error => {
        console.log(error)
      })
  }

Answer 2

所显示的父控件，因此，当您移除一个子控件时，它的状态会发生变化，然后它需要重新呈现全部内容。

对此进行优化的想法是通过React.memo回溯子组件。React有第二个参数，它是一个函数，它根据道具测试组件是否需要重新呈现。

从医生那里：

function MyComponent(props) {
  /* render using props */
}
function areEqual(prevProps, nextProps) {
  /*
  return true if passing nextProps to render would return
  the same result as passing prevProps to render,
  otherwise return false
  */
}
export default React.memo(MyComponent, areEqual);

因此，当您要删除一个子元素时，会通知父进程并重新呈现其子元素，除非您告诉他们，否则不会重新呈现它。

PS:不推荐同时显示900名儿童，用户会看到所有的孩子吗？您可能需要设置分页，以便只显示10/20的子程序。