如何改进我的编码标准以满足高级开发人员的标准

Question

我最近刚刚为一家公司完成了一项技术测试，该公司正在申请一名在react中工作的前端开发人员，但我被拒绝了，没有任何反馈。所以我想知道下一次我能做得更好、改进什么。我最近刚试着申请高年级的前台职位。这是他们给我的测试和我制作的东西。

以下是他们测试的描述。

Create a component as a Form Control according to this design
The control should accept a label
The control should accept a validation function with configurable error message
The control can be incorporated inside a <form> and the selected option pushed up to the form.
The control should fire an event on change
Use the component you made in the previous step to create a form according to this design
Call this https://jsonplaceholder.typicode.com/users to populate list of the users. name should be displayed while id should be saved as the value in the form.
Add the required validation with the Please select a user error message.
Add 2 text fields, one for title and one for body both with required validation. (Don't worry about matching the design for the text fields.)
On submit of the form create a new post by sending the data to https://jsonplaceholder.typicode.com/posts. The request interface will look like
{
"title": "foo",
"body": "bar",
"userId": 1
}

这就是我制作的：

https://codesandbox.io/s/objective-thunder-322xi?file=/src/components/FormComponent.js

我知道情况本可以更好，但有时间限制，也没有提供反馈，所以我不知道哪里出了问题。请有人仔细查看一下，看看它是否符合他们的指示，以及在哪里可以改进。

Answer 1

我仔细阅读了您的代码，可能发现了一些代码，我可能实现了一些不同的代码。我不确定这是否是最好的编码标准，但可能已经这样了。

1. 我看到那里声明了很多useStates(7个声明(。我可能会把一些相关的州组合在一起。下面我举了一个例子供参考。在某些情况下，使用过多的声明可能不好。

2. 可以改进handleChange函数(const handleTitleChange = (ev) => setTitle(ev.target.value);)。这里处理的方式是对每个输入重复。所以，如果我有10个输入，将有10行用于handleChange函数。在我的例子中，我给出了一个更好的处理变化的方法记住在输入字段和状态中放入相同的"name"属性此代码将为您在未来处理onChange和清除代码时节省大量时间

3. 我看到你在表单中使用了"id"属性来引用DOM元素。这对香草JS来说很好，但在React中，最好不要使用。react中有一种更好的方法叫做创建引用，即react.createRef((。这提供了对DOM元素的简单引用。请参考下面的例子。

4. 验证处理方法可以改进。示例中的代码。

5. 我看到错误信息不会消失，一旦你填写内容。因此，这需要改变。

我设法想出了另一种实现方式，它完全依赖于表单验证处理的状态。

CODE WITH CREATE REF不要介意CSS类，我使用了引导

import React, { useState, useEffect } from 'react';
const TestComponent = () => {
const [input, setInput] = useState({
title: '',
body: '',
})
const titleRef = React.createRef()
const bodyRef = React.createRef()
const handleChange = e => {
setInput({ ...input, [e.target.name]: e.target.value })
}
const onHandleSubmit = e => {
e.preventDefault();
input.title ? titleRef.current.innerHTML = '' : titleRef.current.innerHTML = 'Please add a title';
input.body ? bodyRef.current.innerHTML = '' : bodyRef.current.innerHTML = 'Please add a body';
if (!input.title || !input.body) {
return false;
}
console.log('Submit your form');
}
return (
<div className="container py-5">
<form onSubmit={onHandleSubmit}>
<label>Title</label>
<input type="text" name="title" value={input.title} onChange={handleChange} className="form-control" />
<p ref={titleRef} style={{ color: 'red' }}></p>
<label>Body</label>
<input type="text" name="body" value={input.body} onChange={handleChange} className="form-control" />
<p ref={bodyRef} style={{ color: 'red' }}></p>
<button>Submit</button>
</form>
</div>
);
}
export default TestComponent;

带状态的代码用于验证

import React, { useState, useEffect } from 'react';
const TestComponent = () => {
const [input, setInput] = useState({
title: '',
body: '',
titleError: '',
bodyError: '',
})
const handleChange = e => {
setInput({ ...input, [e.target.name]: e.target.value })
}
const onHandleSubmit = e => {
e.preventDefault();
setInput({
...input,
titleError: input.title ? '': 'Please add a title',
bodyError: input.body ? '': 'Please add a body', 
})
console.log(input);
if (!input.title || !input.body) {
return false;
}
console.log('Submit your form');
}
return (
<div className="container py-5">
<form onSubmit={onHandleSubmit}>
<label>Title</label>
<input type="text" name="title" value={input.title} onChange={handleChange} className="form-control" />
<p style={{ color: 'red' }}>{input.titleError}</p>
<label>Body</label>
<input type="text" name="body" value={input.body} onChange={handleChange} className="form-control" />
<p style={{ color: 'red' }}>{input.bodyError}</p>
<button>Submit</button>
</form>
</div>
);
}
export default TestComponent;

附言：根据情况会有更好的处理方法，但这可能会在某种程度上帮助你。

编辑：添加单选按钮以选择用户。userId已添加到状态

const [input, setInput] = useState({
title: '',
body: '',
titleError: '',
bodyError: '',
userId: '',
})

为用户选择收音机。

<div>
<input type="radio" name="userId" value="1" id="1"
checked={input.userId === "1"} onChange={handleChange}
/>
<label htmlFor="1">User 1</label>
</div>
<div>
<input type="radio" name="userId" value="2" id="2"
checked={input.userId === "2"} onChange={handleChange}
/>
<label htmlFor="2">User 2</label>
</div>

相同的onChange处理程序也适用于单选选择。我看到您使用useFetch的响应来呈现用户。通过设置字段，可以使用相同的映射逻辑来渲染此单选。将value和id属性设置为响应中的用户id，依此类推

Answer 2

我发现的一个直接问题是控制台错误。

高级开发人员的生产质量代码不应该这样做。如果发现错误或处理一些边缘情况，我希望在控制台中看到错误。

Warning: Failed prop type: Invalid prop按钮选定的of type布尔值supplied to按钮, expected字符串`。在按钮中(在FormComponent.js:21(

in FormComponent (at App.js:8)
in div (at App.js:7)
in App (at src/index.js:9)
in StrictMode (at src/index.js:8)`

我在控制台中发现了这个，只是浏览到你分享的链接。还有其他事情需要清理，但这是我迄今为止发现的最明显的事情。