Question

我的应用程序从API中提取所有数据，它基本上是一个CRUD应用程序。我的一个动作是从列表中删除一个项目。这是我的行动：

import axios from 'axios'

export function removeUser(userId, lockId) {
  return dispatch => {
    dispatch({ type: 'LOADING' })
    axios({
      method: 'post',
      url: 'http://192.168.100.105:7777/customer/removelockuser',
      data: {
        accessid: userId,
        lockid: lockId
      }
    })
      .then(res => {
        dispatch({ type: 'REMOVE_SUCCESS', payload: res.data })
      })
      .catch(err => {
        console.log('ERROR', err)
      })
  }
}

在我的组件中：

import React, { Component } from 'react'
import { connect } from 'react-redux'
import axios from 'axios'
import _ from 'lodash'
import moment from 'moment'
import { Row, Col, Grid } from 'react-bootstrap'
import { removeUser } from '../redux/actions/removeUserAction'

import '../userToLock.css'

class LockUsers extends Component {
  removeUser() {
    const userId = this.props.customer.userId
    const lockId = this.props.lockId
    //eslint-disable-next-line
    confirm('Vill du verkligen ta bort användaren?') &&
      this.props.removeUser(userId, lockId)
  }

  render() {
    const { user, customer, lockId } = this.props
    const time = moment(customer.timeframe.start).format(
      'MM/D [blev inbjuden klockan] HH:mm'
    )

    return (
      <Grid>
        <Row key={user._id}>
          <Col style={{ width: '100%' }}>
            <ul className="list">
              <li className="flex-container">
                <div className="flex-item-2">
                  <h5 className="sub-title-text-utl">
                    {customer.level == 0
                      ? <h5 className="users">
                          Inbjuden användare: {customer.email} <b>tillagd</b>:{time}
                        </h5>
                      : <h5 className="users">
                          Användare: {customer.name} {customer.surname} tillagd:{time}
                        </h5>}
                    <button className="remove-user-btn" onClick={() => this.removeUser(customer._id)}>
                      <span>&times;</span>
                    </button>
                  </h5>
                </div>
              </li>
            </ul>
          </Col>
        </Row>
      </Grid>
    )
  }
}

export default connect(null, { removeUser })(LockUsers)

这绝对没问题，但如果我想看到更改，我必须刷新页面。所以我想知道在我的行动完成时是否还有更新状态。也许在我的.then()内，但我不知道你是否可以这样做。该组件连接到我的Redux商店btw。

非常感谢我能得到的所有答案！

干杯！

修改

一条评论说我应该添加我的整个组件，请参阅上面的代码。

Answer 1

由于您从父组件传递user, customer, lockId，因此一旦这些道具发生变化，相关组件将重新渲染。

尝试这样的事情：

const { user, customer, lockId } = this.props;

return (
  {/* depending on what defines a user as deleted.. */}
  { user && user.id 
    ? ...
      <Row key={user._id}>
      ...
        {customer.level == 0
        ? <h5 className="users">
          Inbjuden användare: {customer.email} <b>tillagd</b>:{time}
          </h5>
        : <h5 className="users">
          Användare: {customer.name} {customer.surname} tillagd:{time}
          </h5>}
        <button className="remove-user-btn" onClick={() => this.removeUser(customer._id)}>
          <span>&times;</span>
        </button>
    ...
    : 'User not found / deleted'
  }
)

Answer 2

您可以传递userId和

dispatch({ type: 'REMOVE_SUCCESS', payload: res.data, userId })

然后在你的reducer中，你可以从你已经拥有的用户数量中过滤掉它。

case 'REMOVE_SUCCESS':
   return  [
     ...state, 
     users: state.users.filter(user => user.id != action.userId)
   ]

N.B：永远不要改变状态

操作完成后更新状态React，Redux

修改

2 个答案: