javascript - 重构 Javascript 代码 - 需要重构

Question

我正在构建一个类似 KanBan 的 React 应用程序，我在其中添加了一个“卡片”并允许用户选择它是属于“Todo”、“OnProgress”还是“Done”列表。一切正常，但我很确定我编写的函数离最佳实践方法还差得很远。这是我写的代码，如果有人可以提供有关如何折射我的代码的提示/技巧，那就太好了:

这是我的应用程序组件:

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;

Answer 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 会容易得多.

最后一个明显的解决方法是摆脱表单，而是使用具有绑定(bind)操作的按钮。

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

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