Question

当我删除电路（通过详细信息页面上的链接）并重定向回首页时，删除的对象仍然存在，直到我手动刷新页面为止。

我尝试通过路由器传递<bottle.FormsDict object at 0x7ff437abf400>：

props

我曾尝试将删除功能从详细信息视图容器移动到列表视图容器，但无法弄清楚如何将该功能向下传递到各个组件。

删除操作

<Route exact path='/' render={(props) => <CircuitList {...props} /> } />

每次删除电路时，它都会从api中删除，但是当它重定向到主页时，它仍然存在，直到我手动刷新页面为止。

Answer 1

您需要从状态中删除元素（如果处于react状态，则从react状态中删除。如果它处于redux，则从redux状态中删除元素）

或者您也可以在 index 路由重新安装时（在 componentDidMount 中）从后端再次获取所有项目，但是由于网络调用比状态处理更重。我会选择从状态中删除项目的乐观方法（无论它是反应还是redux或您正在使用的任何其他状态管理库）

 handleDeleteCircuit = async (event) => {
   const circuitID = this.props.match.params.id;
   await axios.delete(`link-to-api`, this.state);
   const circuits = [...this.state.circuits]; 
   const index = array.indexOf(circuitID)
   //or remove element from the redux state
   if (index !== -1) {
     circuits.splice(index, 1);
     this.setState({circuits});
   }
    this.props.history.push('/');
    this.forceUpdate();
}

Answer 2

您没有任何将电路从电路列表中删除的代码。

类似的东西：

let this.state.circuits = this.state.circuits.filter((circuit) => {
    return circuit.id == circuitId
})

我不熟悉React，所以也许这需要一些更改。

Answer 3

如果您正在使用Redux存储来管理CircuitList中的项目，则可能的原因是，即使通过api调用删除了条目，数据仍然保留在Redux存储中，这需要条目删除后也要刷新。

Answer 4

在渲染中看到的就是您的状态。

TL; DR 您需要更新状态。

所以您有两种方法。

乐观更新，将删除api触发到服务器+ setState以删除处于您状态的数据。在收到删除API的响应后，请采取相应措施。
在删除API之后，再次从服务器重新获取全部数据并更新状态。

我建议使用选项1，因为它对用户来说感觉更快。

这里是一些额外的概念。

如果要与“ CircuitList”和“ CircuitDetail”页面共享状态（数据）。您应将电路存储在某个父级（例如App（或Redux状态））中，然后将其传递给每个组件。
还是乐观的更新模式。立即触发API + setState ...如果出现问题，请还原。

如果您需要其他帮助，请告诉我：）

下面是您可以做的。

// assuming you have your data in App, state.circuits
class App extends React.Component {
  state = {
    circuits: [
      { id: 1, title: 'Circuit 1' },
      { id: 2, title: 'Circuit 2' },
      { id: 3, title: 'Circuit 3' },
    ],
  }

  afterDeleteCircuit = (circuitID) => {

    // state, before delete anything
    const currentCircuits = this.state.circuits;

    // Remove deleted item from state.
    this.setState({
      circuits: currentCircuits.filter(circuit => circuit.id !== circuitID),
    });

    // Fire delete API
    axios
      .delete(`link-to-api`, this.state)
      .then(response => {
        if (response.status === 'error') {
          // Oops, something went wrong. Let's get that deleted Id back.
          this.setState({
            circuits: currentCircuits,
          });

          // Show Error message here.
        } else {

          // Delete successfully, do nothing.
          // Because we already remove the deleted id from state.

          // Show success message here.


        }
      });
  }

  render() {
    return (
      <Router>
        <Route exact path='/' render={(props) => <CircuitList {...props} circuits={this.state.circuits} /> } />
        <Route path='/circuits/:id' render={(props) => <CircuitDetail {...props} onDelete={this.afterDeleteCircuit} /> } />

      </Router>
    );
  }
}


class CircuitList extends React.Component {

  render () {
    const { circuits } = this.props;
    return (
      <div>
        {circuits.map(circuit => (
           <li>{circuit.title} <Link to={`/circuit/${circuit.id}`}>Edit</Link></li>
        )}
      </div>
    );
  }
}


class CircuitDetail extends React.Component {

  handleDelete = (e) => {
    const { match, history } = this.props;
    const id = match.params.id;
    this.props.onDelete(id);

    history.push('/');
  }

  render () {
    return (
      <div>
        ...
        // Delete button
        <button onClick={this.handleDelete}>Delete</button>
      </div>
    );
  }

}

为什么删除后必须手动刷新页面？

4 个答案: