重構 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