Question

我正在为用户拥有的每个帖子在父组件中渲染一张卡片。在卡中，所有数据都通过道具传递。我有一个可以正常工作的delete axios调用，但是我必须手动刷新页面才能显示更新。

可以通过任何方式手动更新用户界面吗？

// DASHBOARD.JS
if (this.state.posts.length > 0 && this.state.loaded === true) {
  const posts = this.state.posts;

  content = posts.map(post => (
    <Card
      key={post._id}
      author={post.author}
      title={post.title}
      date={post.date}
      body={post.body}
      id={post._id}
    />
  ));

// CARD.JS
deleteOnClick = e => {
  axios
    .delete('http://localhost:5000/auth/deletePost', {
      params: {
        id: this.props.id
      }
    })
    .then(res => {
      console.log(res);
    })
    .catch(err => console.log(err));
  };

Answer 1

我认为您需要解决两个问题才能使此模式正常工作。

第一件事：避免在仅用于演示目的的组件中定义业务逻辑（请读here）。因此，在Card组件中，不应明确定义deleteOnClick方法，而应从上方以func类型的专用道具接收它。

第二件事：列表组件应处理通过axios调用从列表中删除项目的逻辑，在then语句中，您应考虑一种更新用于渲染{{ 1}} s。

伪代码示例：

列表组件

Card

卡组件：

import React from 'react';
import Card from './Card';

export default class List extends PureComponent {
  state = {
    items: [],
    error: null,
  }

  componentDidMount() {
    // add axios call to retrieve items data
  }

  deleteItemHandler = () => {
    axios
      .delete('http://localhost:5000/auth/deletePost', {
        params: {
          id: this.props.id
        }
      })
      .then(res => {
        this.setState({
          items: res.json(),
        })
      })
      .catch(err => {
        this.setState({
          error: err,
        })
      });
    };
  }

  render() {
    const { items } = this.state;
    return (
      <div>
        {items.map(item => (
          <Card
            {...item}
            onClick={this.deleteItemHandler}
          />
        ))}
      </div>
    )
  }
}

一旦您熟悉了将逻辑和表示法分离的概念，就可以开始介绍redux并在另一个层次上做事情：）

希望这会有所帮助！

项目触发自己的删除后更新列表

1 个答案: