重构 Javascript 代码 - 需要重构

Question

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

这是我的应用程序组件：

 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 作为输入值。 使用受控组件会容易得多。

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

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

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

Answer 2

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