Question

我正在开发一款能够跟踪销售人员的可用性的应用程序，这些应用程序基于“可用”和“＃34;或＆＃34;使用客户＆＃34;。

这是我遇到的错误。我将使用一个例子：

已将2名销售人员添加到该应用中。它们添加到应用程序的顺序似乎与我不期望的方式相关。例如，如果我添加的第一个销售人员是James，第二个是Rick，如果我点击Rick旁边的按钮，其中包含＆＃34;帮助客户＆＃34;，James现在将填充＆＃34;可用＆＃34;和＃34; With Client＆＃34;桌子和里克都会消失。

但是，如果我按特定顺序点击它们，它可以正常工作。例如，在与上例相同的情况下，如果我点击James＆＃39; ＆＃34;帮助客户＆＃34;首先，然后Rick＆＃34;帮助了一个客户＆＃34;然后是James＆＃39; ＆＃34;不再与客户＆＃34;，然后Rick＆＃34;不再与客户＆＃34;，它的行为符合预期。

这是github项目，您可以克隆它并自己尝试： https://github.com/jackson-lenhart/salesperson-queue

我也会在这里发布我认为最相关的代码：

main.js：

import React from "react";
import { render } from "react-dom";
import shortid from "shortid";
import deepCopy from "deep-copy";

import AddForm from "./add-form";
import Available from "./available";
import WithClient from "./with-client";

class Main extends React.Component {
  constructor() {
    super();
    this.state = {
      queue: {
        available: [],
        withClient: [],
        unavailable: []
      },
      currName: ""
    };

    this.addToQueue = this.addToQueue.bind(this);
    this.removeFromQueue = this.removeFromQueue.bind(this);
    this.handleInput = this.handleInput.bind(this);
    this.move = this.move.bind(this);
  }

  addToQueue(name) {
    let newQueue = deepCopy(this.state.queue);
    newQueue.available = this.state.queue.available.concat({
      name,
      id: shortid.generate()
    });
    this.setState({
      queue: newQueue
    });
  }

  removeFromQueue(id) {
    let newQueue = deepCopy(this.state.queue);
    for (let k in this.state.queue) {
      newQueue[k] = this.state.queue[k].filter(x =>
        x.id !== id
      );
    }
    this.setState({
      queue: newQueue
    });
  }

  move(id, from, to) {
    this.setState(prevState => {
      let newQueue = deepCopy(prevState.queue);
      let temp = newQueue[from].find(x => x.id === id);
      newQueue[from] = prevState.queue[from].filter(x =>
        x.id !== id
      );
      newQueue[to] = prevState.queue[to].concat(temp);
      return {
        queue: newQueue
      };
    });
  }

  handleInput(event) {
    this.setState({
      currName: event.target.value
    });
  }

  render() {
    return (
      <div>
        <AddForm
          addToQueue={this.addToQueue}
          handleInput={this.handleInput}
          currName={this.state.currName}
        />
        <Available
          available={this.state.queue.available}
          move={this.move}
          removeFromQueue={this.removeFromQueue}
        />
        <WithClient
          withClient={this.state.queue.withClient}
          move={this.move}
          removeFromQueue={this.removeFromQueue}
        />
      </div>
    );
  }
}

render(
  <Main />,
  document.body
);

附加form.js：

import React from "react";

class AddForm extends React.Component {
  constructor() {
    super();
    this.clickWrapper = this.clickWrapper.bind(this);
  }

  clickWrapper() {
    this.props.addToQueue(this.props.currName);
  }

  render() {
    return (
      <div>
        <input
          type="text"
          onChange={this.props.handleInput}
        />
        <button onClick={this.clickWrapper}>
          <strong>Add To Queue</strong>
        </button>
      </div>
    );
  }
}

export default AddForm;

available.js：

import React from "react";

import Salesperson from "./salesperson";

class Available extends React.Component {
  render() {
    const style = {
      item: {
        padding: "10px"
      },
      available: {
        padding: "20px"
      }
    };

    let available;
    this.props.available.length === 0 ?
      available = (
        <p>None available.</p>
      ) : available = this.props.available.map(x =>
        <div key={x.id} style={style.item}>
          <Salesperson
            key={x.id}
            id={x.id}
            name={x.name}
            move={this.props.move}
            removeFromQueue={this.props.removeFromQueue}
            parent={"available"}
          />
        </div>
      );

    return (
      <div style={style.available}>
        <h1>Available</h1>
        {available}
      </div>
    );
  }
}

export default Available;

salesperson.js：

import React from "react";

import DeleteButton from "./delete-button";
import HelpedButton from "./helped-button";
import NlwcButton from "./nlwc-button";

class Salesperson extends React.Component {
  render() {
    const style = {
      name: {
        padding: "10px"
      },
      button: {
        padding: "5px"
      }
    };

    let moveButton;
    switch(this.props.parent) {
      case "available":
        moveButton = (
          <HelpedButton
            move={this.props.move}
            id={this.props.id}
            style={style.button}
          />
        );
        break;
      case "withClient":
        moveButton = (
          <NlwcButton
            move={this.props.move}
            removeFromQueue={this.props.removeFromQueue}
            id={this.props.id}
            style={style.button}
          />
        );
        break;
      default:
        console.error("Invalid parent:", this.props.parent);
    }

    return (
      <div>
        <span style={style.name}>{this.props.name}</span>
        {moveButton}
        <DeleteButton
          removeFromQueue={this.props.removeFromQueue}
          name={this.props.name}
          id={this.props.id}
          style={style.button}
        />
      </div>
    );
  }
}

export default Salesperson;

帮助-button.js：

import React from "react";

class HelpedButton extends React.Component {
  constructor() {
    super();
    this.clickWrapper = this.clickWrapper.bind(this);
  }

  clickWrapper() {
    this.props.move(this.props.id, "available", "withClient");
  }

  render() {
    return (
      <span style={this.props.style}>
        <button onClick={this.clickWrapper}>
          <strong>Helped A Customer</strong>
        </button>
      </span>
    );
  }
}

export default HelpedButton;

Answer 1

这只是我的一个错字。不再是问题。这是修正拼写错误的提交： https://github.com/jackson-lenhart/salesperson-queue/commit/b86271a20ac8b700bec1e15e001b0c6ef57adb8b

在队列（列表）错误

1 个答案: