Javascript React类组件方法：我的代码是必需的吗？
我对功能性、命令性和声明性的术语不太熟悉。我知道纯函数很容易测试。我自学了Javascript编程。到目前为止，它还在工作，但我的目标是学习编写干净且可维护的代码。 我的问题是，下面的方法Javascript React类组件方法：我的代码是必需的吗？,javascript,reactjs,Javascript,Reactjs,我对功能性、命令性和声明性的术语不太熟悉。我知道纯函数很容易测试。我自学了Javascript编程。到目前为止，它还在工作，但我的目标是学习编写干净且可维护的代码。 我的问题是，下面的方法addProductToSaleList不好而且不稳定，因为它是必需的？我该如何做才能有所不同 class SaleComponent extends React.Component { addProductToSaleList = (values, dispatch, props) => {
addProductToSaleListclass SaleComponent extends React.Component {
addProductToSaleList = (values, dispatch, props) => {
//filter product from productList
const productFound = props.productList.filter(product => {
if (values.productCode === product.code.toString()) {
return product
}
return undefined
})[0]
if (productFound) {
// filter sale list to check if there is already product in the list.
const detailFound = props.saleItem.details.filter(detail => {
if (productFound.name === detail.product) {
return detail
}
return undefined
})[0]
// if it is exist just increment the qty
if (detailFound) {
const { sub_total, ...rest } = detailFound
props.dispatcher('UPDATE_SALEDETAIL_ASYNC', {
...rest,
qty: parseInt(detailFound.qty, 10) + 1
})
// if it is not exist add new one
} else {
props.dispatcher('ADD_SALEDETAIL_ASYNC', {
product: productFound.id,
price: productFound.price,
qty: 1
})
}
} else {
alert('The product code you add is not exist in product list');
}
}
render() {
// Render saleList
}
}
我相信这个问题应该问，但我会试一试。部分代码可以改进
const productFound = props.productList.filter(product => {
if (values.productCode === product.code.toString()) {
return product
}
return undefined
})[0]
[0]const productFound = props.productList.find(product => values.productCode === product.code.toString());
if (!productFound) {
alert('The product code you add is not exist in product list');
return;
}
// rest of the function
addProductToSaleList = (values, props) => {
//filter product from productList
const productFound = props.productList.find(product => values.productCode === product.code.toString());
if (!productFound) {
alert('The product code you add is not exist in product list');
return;
}
// filter sale list to check if there is already product in the list.
const detailFound = props.saleItem.details.find(detail => productFound.name === detail.product);
const getAction = details => `${details ? 'UPDATE' : 'ADD'}_SALEDETAIL_ASYNC`;
const getObject = (details, productFound) => {
if (!details) {
return {
product: productFound.id,
price: productFound.price,
qty: 1
};
}
const { sub_total, ...rest } = details;
return {
...rest,
qty: parseInt(details.qty, 10) + 1
};
}
props.dispatcher(getAction(details), getObject(details, productFound));
}
findconst detailFound = props.saleItem.details.find(detail => productFound.name === detail.product);
// if it is exist just increment the qty
if (detailFound) {
const { sub_total, ...rest } = detailFound
props.dispatcher('UPDATE_SALEDETAIL_ASYNC', {
...rest,
qty: parseInt(detailFound.qty, 10) + 1
})
// if it is not exist add new one
} else {
props.dispatcher('ADD_SALEDETAIL_ASYNC', {
product: productFound.id,
price: productFound.price,
qty: 1
})
}
(values, props) => { ... }
const getAction = details => `${detailFound ? 'UPDATE' : 'ADD'}_SALEDETAIL_ASYNC`;
const getObject = (details, productFound) => {
if (!details) {
return {
product: productFound.id,
price: productFound.price,
qty: 1
};
}
const { sub_total, ...rest } = detailFound;
return {
...rest,
qty: parseInt(detailFound.qty, 10) + 1
};
}
props.dispatcher(getAction(details), getObject(details, productFound));
if (!productFound) {
alert('The product code you add is not exist in product list');
return;
}
// rest of the function
addProductToSaleList = (values, props) => {
//filter product from productList
const productFound = props.productList.find(product => values.productCode === product.code.toString());
if (!productFound) {
alert('The product code you add is not exist in product list');
return;
}
// filter sale list to check if there is already product in the list.
const detailFound = props.saleItem.details.find(detail => productFound.name === detail.product);
const getAction = details => `${details ? 'UPDATE' : 'ADD'}_SALEDETAIL_ASYNC`;
const getObject = (details, productFound) => {
if (!details) {
return {
product: productFound.id,
price: productFound.price,
qty: 1
};
}
const { sub_total, ...rest } = details;
return {
...rest,
qty: parseInt(details.qty, 10) + 1
};
}
props.dispatcher(getAction(details), getObject(details, productFound));
}
值道具dispatchersaleItem中提供假值。详细信息您可以查看是否使用正确的值调用了dispatcher
。你应该测试它的不同组合
模拟alert
函数（同样，我会使用另一种UI方法）并验证是否调用了该函数，以及是否没有调用其他代码（声明没有调用伪dispatcher
）。大概是这样的：
let actionToAssert;
let objectToAssert;
let values = { productCode: 'somecode' };
let props = {
productList: // your item listm with id and price, name, etc,
saleItem: {
details: // your details array here
}
dispatcher: (action, newObject) => {
actionToAssert = action;
objectToAssert = newObject;
}
}
addProductToSaleList(values, props); // make here assertions over actionToAssert and objectToAssert
我相信这个问题应该问，但我会试一试。部分代码可以改进
const productFound = props.productList.filter(product => {
if (values.productCode === product.code.toString()) {
return product
}
return undefined
})[0]
首先，函数接收一个回调，并为每个要执行的项执行回调。如果回调返回一个解释为true的值，它将返回函数将生成的新数组中的项。否则，它将跳过该项。假设您试图在代码中查找一个项目，您可以使用函数直接返回该元素（不需要[0]
），如果找不到该项目，则可以使用未定义的函数。所以你的代码可以重写成
const productFound = props.productList.find(product => values.productCode === product.code.toString());
注意：不支持IE。
然后，如果找不到该值，您可以发出警报并执行一次操作。（您可能还希望以不同的方式处理错误，使用比普通警报更好的格式）
代码看起来像
if (!productFound) {
alert('The product code you add is not exist in product list');
return;
}
// rest of the function
addProductToSaleList = (values, props) => {
//filter product from productList
const productFound = props.productList.find(product => values.productCode === product.code.toString());
if (!productFound) {
alert('The product code you add is not exist in product list');
return;
}
// filter sale list to check if there is already product in the list.
const detailFound = props.saleItem.details.find(detail => productFound.name === detail.product);
const getAction = details => `${details ? 'UPDATE' : 'ADD'}_SALEDETAIL_ASYNC`;
const getObject = (details, productFound) => {
if (!details) {
return {
product: productFound.id,
price: productFound.price,
qty: 1
};
}
const { sub_total, ...rest } = details;
return {
...rest,
qty: parseInt(details.qty, 10) + 1
};
}
props.dispatcher(getAction(details), getObject(details, productFound));
}
要查找详细信息，还可以使用find
方法
const detailFound = props.saleItem.details.find(detail => productFound.name === detail.product);
然后调用剩下的代码
// if it is exist just increment the qty
if (detailFound) {
const { sub_total, ...rest } = detailFound
props.dispatcher('UPDATE_SALEDETAIL_ASYNC', {
...rest,
qty: parseInt(detailFound.qty, 10) + 1
})
// if it is not exist add new one
} else {
props.dispatcher('ADD_SALEDETAIL_ASYNC', {
product: productFound.id,
price: productFound.price,
qty: 1
})
}
另一项改进：
您正在接收一个分派函数作为参数，但您没有使用它。所以您可以从函数的声明中删除它
(values, props) => { ... }
你可以把最后一部分分成两个不同的函数，比如
const getAction = details => `${detailFound ? 'UPDATE' : 'ADD'}_SALEDETAIL_ASYNC`;
const getObject = (details, productFound) => {
if (!details) {
return {
product: productFound.id,
price: productFound.price,
qty: 1
};
}
const { sub_total, ...rest } = detailFound;
return {
...rest,
qty: parseInt(detailFound.qty, 10) + 1
};
}
然后打电话
props.dispatcher(getAction(details), getObject(details, productFound));
最终的结果是
if (!productFound) {
alert('The product code you add is not exist in product list');
return;
}
// rest of the function
addProductToSaleList = (values, props) => {
//filter product from productList
const productFound = props.productList.find(product => values.productCode === product.code.toString());
if (!productFound) {
alert('The product code you add is not exist in product list');
return;
}
// filter sale list to check if there is already product in the list.
const detailFound = props.saleItem.details.find(detail => productFound.name === detail.product);
const getAction = details => `${details ? 'UPDATE' : 'ADD'}_SALEDETAIL_ASYNC`;
const getObject = (details, productFound) => {
if (!details) {
return {
product: productFound.id,
price: productFound.price,
qty: 1
};
}
const { sub_total, ...rest } = details;
return {
...rest,
qty: parseInt(details.qty, 10) + 1
};
}
props.dispatcher(getAction(details), getObject(details, productFound));
}
我的问题是下面的addProductToSaleList方法不好，而且
不稳定，因为这是必须的
您的代码是可测试的，没有外部依赖关系。因此，您可以传递模拟值和道具，并向其中添加单元测试。这意味着，传递一个假的值
和道具
（它们只是普通的js对象）并对其进行断言
例如：
您可以模拟dispatcher
函数，并在productList和saleItem中提供假值。详细信息您可以查看是否使用正确的值调用了dispatcher
。你应该测试它的不同组合
模拟alert
函数（同样，我会使用另一种UI方法）并验证是否调用了该函数，以及是否没有调用其他代码（声明没有调用伪dispatcher
）。大概是这样的：
let actionToAssert;
let objectToAssert;
let values = { productCode: 'somecode' };
let props = {
productList: // your item listm with id and price, name, etc,
saleItem: {
details: // your details array here
}
dispatcher: (action, newObject) => {
actionToAssert = action;
objectToAssert = newObject;
}
}
addProductToSaleList(values, props); // make here assertions over actionToAssert and objectToAssert
返回未定义
->返回
返回未定义
->返回
非常感谢！非常干净。我从中学到了很多。我可以把它移到代码复查吗？我不知道，非常感谢！非常干净。我从中学到了很多。我可以把它移到代码复查吗？我不知道这件事。