重构 Javascript 代码 - 需要重构答案

【问题标题】：Refactoring Javascript code - Refactoring Required重构 Javascript 代码 - 需要重构
【发布时间】：2019-07-15 13:28:08
【问题描述】：

我正在构建一个类似于看板的反应应用程序，其中我添加了一个“卡片”并允许用户选择它是否属于“待办事项”、“进度”或“完成”列表。一切正常，但我很确定我编写的函数与最佳实践方法相差无几。这是我编写的代码，如果有人可以提供有关如何折射我的代码的提示/技巧，那就太好了：

这是我的应用组件：

class App extends Component {
    constructor(props) {
      super(props)
      this.state = {
        columns: [
          {
            name: 'Todos',
            cards: []
          },
          {
            name: 'Onprogress',
            cards: []
          },
          {
            name: 'Done',
            cards: []
          }, 
        ] 
      };
    }; 

    addCard = (card) => {
      console.log("Adding a Card");
      const cards = { ...this.state.columns.cards };
      cards[`card${Date.now()}`] = card;

      console.log(card.taskStatus)

      if (card.taskStatus === 'Todos') {
        this.setState({
          columns: [
            { 
              name: 'Todos',
              cards: cards
            },
            { 
              name: 'Onprogress',
              cards: []
            },
            { 
              name: 'Done',
              cards: []
            },
          ] 
        });
      } else if (card.taskStatus === 'Onprogress') {
        this.setState({
          columns: [
            { 
              name: 'Todos',
              cards: []
            },
            { 
              name: 'Onprogress',
              cards: cards
            },
            { 
              name: 'Done',
              cards: []
            },
          ] 
        }); 
      } else {
        this.setState({
          columns: [
            { 
              name: 'Todos',
              cards: []
            },
            { 
              name: 'Onprogress',
              cards: []
            },
            { 
              name: 'Done',
              cards: cards
            },
          ] 
        }); 
      }
    };
    
  render() {
    return (
  <div className="App">
   {Object.keys(this.state.columns).map(key => (
      <Column key={key} details={this.state.columns[key]} />
    ))}
      <AddCardForm addCard={this.addCard} />
  </div>
    );
  }
}
export default App;

这是我的 AddCardForm 组件：

class AddCardForm extends Component {

    taskName = React.createRef();
    taskDescription = React.createRef();
    taskPeriod = React.createRef();
    taskStatus = React.createRef(); 

    addCardtoApp = event => {
        event.preventDefault();
        const card = {
            taskName: this.taskName.current.value, 
            taskDescription: this.taskDescription.current.value,
            taskPeriod: this.taskPeriod.current.value,
            taskStatus: this.taskStatus.current.value,
            
        };
        this.props.addCard(card);
        event.currentTarget.reset();
    };

    render() {
        return (
        <form onSubmit={this.addCardtoApp}>
        <label>
            Task Name:
            <input type="text" name="taskName" ref={this.taskName}/>
        </label> <br />
        <label>
            Description:
            <input type="text" name="taskDescription" ref={this.taskDescription} />
        </label> <br /> 
        <label>
            Period:
            <input type="text" name="taskPeriod" ref={this.taskPeriod} />
        </label> <br />
        <label>
            Task Status:
            <select type="text" name="taskStatus" ref={this.taskStatus}>
                <option value="Todo">Todo</option>
                <option value="Onprogress">Onprogress</option>
                <option value="Done">Done</option>
            </select>
        </label> <br />
        <input type="submit" value="Submit" />
        </form>
        );
    }
}

export default AddCardForm;

【问题讨论】：

你也可以在这里要求 codereview codereview.stackexchange.com （我认为它实际上是要求这个而不是 stackoverflow 的地方，因为你的代码正在工作等等）

标签： javascript reactjs function dom-events

【解决方案1】：

嗯，你的第一个状态可以分解为 3 个状态对象而不是一个数组，因为它们本质上都是命名的。

this.state = {
  todo: {
    name: 'Todos',
    cards: []
  },
  onProgress: {
    name: 'OnProgress',
    cards: []
  },
  done: {
    name: 'Done',
    cards: []
  },
}

这将允许您简化addCard 函数。

const cardType = card.taskStatus.toLowerCase()
const cards = { ...this.state[cardType].cards }
cards[`card${Date.now()}`] = card

this.setState({ [cardType]: { cards } })

我可能搞砸了setState 函数，但这个想法应该很明显。

您要做的第二件事是使用 refs 作为输入值。使用controlled component 会容易得多。

最后一个明显的解决方法是去掉表单，而是使用带有绑定操作的按钮。

如果你想遵循语义 HTML，表单通常用于向服务器提交信息。按钮元素用于在当前页面中执行操作，锚元素用于将用户导航到新页面（即使在 SPA 中）。

因此，如果表单不向其他地方发送数据，请避免使用表单。使用按钮来调用当前页面上的操作并使用锚标记来移动用户。

【讨论】：

【解决方案2】：

我希望这会有所帮助： Common React Code-Smells and How to Avoid Them

【讨论】：