Refactoring Javascript code - Refactoring Required

Question

I'm building a KanBan like react application whereby I add a 'Card' and enable the user to choose whether it falls under the 'Todo', 'OnProgress', or 'Done' List. Everything works fine, but I'm pretty sure the function I have written isn't any where near best practice methods. This is the code I wrote, if anyone can offer tip/tricks on how to refractor my code it would be great:

This is my App Component:

 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;

And this is my AddCardForm Component:

 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

Well, first of your state can be broken down into 3 state objects instead of one array, since they're all essentially named anyway.

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

This will allow you to simplify the addCard function.

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

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

I probably borked the setState function, but the idea should be apparent.

The second thing you're doing is using refs for input values. It'd be much easier to use a controlled component .

Last obvious fix would be to get rid of the form and instead use a button with a bound action.

If you want to follow semantic HTML, forms are generally used to submit information to a server. Button elements are for executing an action within the current page and anchor elements are for navigating the user to a new page (even in an SPA).

So avoid forms if they're not sending data somewhere else. Use buttons to invoke actions on the current page and anchor tags to move the user around.

Answer 2

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