Javascript 使用Redux将更新状态后的所有元素渲染为一个

我有个小问题 在我更新数组中一个元素的状态之后，我需要渲染所有元素，即使是那个些并没有改变状态的元素

const mapStateToProps = state => ({
  tables: getAll(state),
  loading: getLoadingState(state),
});

const mapDispatchToProps = dispatch => ({
  fetchTables: () => dispatch(fetchFromAPI()),
  postTableStatus: (table, status, order) => dispatch(putToTableStatus(table, status, order)),
});


export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Waiter);

我有一个服务员组件，其中有一个状态按钮，我正在更新一个表的状态

class Waiter extends React.Component {
  static propTypes = {
    fetchTables: PropTypes.func,
    loading: PropTypes.shape({
      active: PropTypes.bool,
      error: PropTypes.oneOf(PropTypes.bool,PropTypes.string),
    }),
    tables: PropTypes.any,
    postTableStatus: PropTypes.func,

  }

  componentDidMount(){
    const { fetchTables } = this.props;
    fetchTables();
  }

  onClick(e, tableId, status, order) {
    e.preventDefault();

    if(status === 'free'){
      status = 'thinking';
    }
    else if(status === 'thinking'){
      status = 'ordered';
    }
    else if(status === 'ordered'){
      status = 'prepared';
    }
    else if(status === 'prepared'){
      status = 'delivered';
    }
    else if(status === 'delivered'){
      status = 'paid';
    }
    else if(status === 'paid'){
      status = 'free';
    }

    this.props.postTableStatus(tableId, status, order);

  }

  renderActions(status, id, order){
    switch (status) {
      case 'free':
        return (
          <>
            <Button onClick={(e) => this.onClick(e, id, status, order)}>thinking</Button>
            <Button onClick={(e) => this.onClick(e, id, status, order)}>new order</Button>
          </>
        );
      case 'thinking':
        return (
          <Button onClick={(e) => this.onClick(e, id, status, order)}>new order</Button>
        );
      case 'ordered':
        return (
          <Button onClick={(e) => this.onClick(e, id, status, order )}>prepared</Button>
        );
      case 'prepared':
        return (
          <Button onClick={(e) => this.onClick(e, id, status, order)}>delivered</Button>
        );
      case 'delivered':
        return (
          <Button onClick={(e) => this.onClick(e, id, status, order)}>paid</Button>
        );
      case 'paid':
        return (
          <Button onClick={(e) => this.onClick(e, id, status, order)}>free</Button>
        );
      default:
        return null;
    }
  }

  render() {
    const { loading: { active, error }, tables } = this.props;
    console.log('props',this.props);
    if(active || !tables.length){
      return (
        <Paper className={styles.component}>
          <p>Loading...</p>
        </Paper>
      );
    } else if(error) {
      return (
        <Paper className={styles.component}>
          <p>Error! Details:</p>
          <pre>{error}</pre>
        </Paper>
      );
    } else {
      return (
        <Paper className={styles.component}>
          <Table>
            <TableHead>
              <TableRow>
                <TableCell>Table</TableCell>
                <TableCell>Status</TableCell>
                <TableCell>Order</TableCell>
                <TableCell>Action</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {tables.map(row => (
                <TableRow key={row.id}>
                  <TableCell component="th" scope="row">
                    {row.id}
                  </TableCell>
                  <TableCell>
                    {row.status}
                  </TableCell>
                  <TableCell>
                    {row.order && (
                      <Button to={`${process.env.PUBLIC_URL}/waiter/order/${row.order}`}>
                        {row.order}
                      </Button>
                    )}
                  </TableCell>
                  <TableCell>
                    {this.renderActions(row.status, row.id, row.order)}
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </Paper>
      );
    }
  }
}

const mapStateToProps = state => ({
  tables: getAll(state),
  loading: getLoadingState(state),
});

const mapDispatchToProps = dispatch => ({
  fetchTables: () => dispatch(fetchFromAPI()),
  postTableStatus: (table, status, order) => dispatch(putToTableStatus(table, status, order)),
});


export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Waiter);

和tableRedux.js文件

const mapStateToProps = state => ({
  tables: getAll(state),
  loading: getLoadingState(state),
});

const mapDispatchToProps = dispatch => ({
  fetchTables: () => dispatch(fetchFromAPI()),
  postTableStatus: (table, status, order) => dispatch(putToTableStatus(table, status, order)),
});


export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Waiter);

tables: Array(6)
0: {id: 1, status: "thinking", order: null}
1: {id: 2, status: "thinking", order: null}
2: {id: 3, status: "free", order: 1234}
3: {id: 4, status: "free", order: 3647}
4: {id: 5, status: "free", order: 12340}
5: {id: 6, status: "free", order: 45207}
length: 6

更新前我的道具是由6个表组成的数组

const mapStateToProps = state => ({
  tables: getAll(state),
  loading: getLoadingState(state),
});

const mapDispatchToProps = dispatch => ({
  fetchTables: () => dispatch(fetchFromAPI()),
  postTableStatus: (table, status, order) => dispatch(putToTableStatus(table, status, order)),
});


export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Waiter);

tables:
id: 4
order: 3647
status: "thinking"

但在更新之后，我得到的只是刚刚更新的表

const mapStateToProps = state => ({
  tables: getAll(state),
  loading: getLoadingState(state),
});

const mapDispatchToProps = dispatch => ({
  fetchTables: () => dispatch(fetchFromAPI()),
  postTableStatus: (table, status, order) => dispatch(putToTableStatus(table, status, order)),
});


export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Waiter);

case POST_STATUS: {
      return{
        ...statePart,
        data: action.payload,
      };
    }

不确定如何使其工作：/

---

这里是最新的提交

我猜这是因为这里您完全覆盖了reducer中的数据，而不是覆盖您更改的一个表

const mapStateToProps = state => ({
  tables: getAll(state),
  loading: getLoadingState(state),
});

const mapDispatchToProps = dispatch => ({
  fetchTables: () => dispatch(fetchFromAPI()),
  postTableStatus: (table, status, order) => dispatch(putToTableStatus(table, status, order)),
});


export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Waiter);

试着改变这个

const mapStateToProps = state => ({
  tables: getAll(state),
  loading: getLoadingState(state),
});

const mapDispatchToProps = dispatch => ({
  fetchTables: () => dispatch(fetchFromAPI()),
  postTableStatus: (table, status, order) => dispatch(putToTableStatus(table, status, order)),
});


export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Waiter);

case POST_STATUS: {
      return {
        ...statePart,
        data: [
          ...statePart.data.filter((table) => table.id !== action.payload.id), 
          action.payload
        ],
      };
    }

对此

const mapStateToProps = state => ({
  tables: getAll(state),
  loading: getLoadingState(state),
});

const mapDispatchToProps = dispatch => ({
  fetchTables: () => dispatch(fetchFromAPI()),
  postTableStatus: (table, status, order) => dispatch(putToTableStatus(table, status, order)),
});


export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Waiter);

case POST_STATUS: {
      const editedIndex = statePart.data.findIndex((table) => table.id === action.payload.id);
      return {
        ...statePart,
        data: [
          ...statePart.data.slice(0, editedIndex),
          action.payload
          ...statePart.data.slice(editedIndex + 1)
        ],
      };
    }

这样，您应该返回所有旧表，以及更改的表的最新数据

const mapStateToProps = state => ({
  tables: getAll(state),
  loading: getLoadingState(state),
});

const mapDispatchToProps = dispatch => ({
  fetchTables: () => dispatch(fetchFromAPI()),
  postTableStatus: (table, status, order) => dispatch(putToTableStatus(table, status, order)),
});


export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Waiter);

编辑： 这不会保留顺序，如果在进行编辑后需要阵列不重新排序，请尝试以下操作：

const mapStateToProps = state => ({
  tables: getAll(state),
  loading: getLoadingState(state),
});

const mapDispatchToProps = dispatch => ({
  fetchTables: () => dispatch(fetchFromAPI()),
  postTableStatus: (table, status, order) => dispatch(putToTableStatus(table, status, order)),
});


export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Waiter);

---

谢谢第一个部分正在工作，但当我放置带有not re ordr代码的部分时，它会说'data'未定义，或者'data'未定义，但是

无法读取未定义的属性'findIndex'。

Oops，它应该是

statePart.data

not

statePart.filter

，我将编辑答案