Javascript对象括号符号不工作

Question

提前感谢大家。根据截图:

输入图片描述

我希望使用动态变量过滤器()第33行

但是它一直抛出错误。如果我使用对象的名称属性Filter_M(例如:"ALL")，它工作得很好。如果我使用的值也通过使用函数(例如:(顺序)=比;order.completed !)直接，它工作得很好。我该如何解决这个问题?注意:我遵循MDN文章中使用的类似程序。看到的:回到过滤器按钮

我的部分代码如下所示，而react组件的链接显示在底部:

import React from "react";
import FilterButton from "./components/filterButton";
import MyOrder from "./components/MyOrder";
// const ORDER = [
//   { cname: 'ki', item: 'liveChicken', quantity: 0, id: "order-0", completed: true },
//   { cname: 'fu', item: 'egg', quantity: 0, id: "order-1", completed: false },
//   { cname: 'nu', item: 'chicken', quantity: 0, id: "order-2", completed: false}
// ]
// const root = ReactDOM.createRoot(document.getElementById('root'));
// root.render(
//   <React.StrictMode>
//     <App2 orders={ORDER} />
//   </React.StrictMode>
// );

const FILTER_M = {
ALL: () => true,
Active: (order) => !order.completed,
Completed: (order) => order.completed
};
const FILTER_NAMES = Object.keys(FILTER_M);
function App(props) {
const chickenPrice = 5000;
const [filter, setFilter] = useState('All');
const [orders, setOrders] = useState(props.orders)

const orderList = orders
.filter(FILTER_M[filter])
.map((order) => (
<MyOrder
item={order.item}
quantity={order.quantity}
cname={order.cname}
id={order.id}
completed={order.completed}
key={order.id}
/>))

const filterList = FILTER_NAMES.map((cname) => (
<FilterButton
key={cname}
cname={cname}
isPressed={cname === filter}
setFilter={setFilter}
/>
));
}

代码沙箱

我期望动态显示，任务/订单活动，完成，默认情况下显示所有订单。

我试过使用属性名称或值来硬编码它，一切都很好。但是使用object (FILTER_MAP)括号表示法中的命名变量，这是访问命名变量作为对象的名称属性的唯一方法。

Answer 1

根据您提供的MDN文章，这段代码应该可以工作，我无法看到您的代码的完整图片，但无论如何，下面的代码正在工作:

const DATA = [
{ id: 'todo-0', name: 'Eat', completed: true },
{ id: 'todo-1', name: 'Sleep', completed: false },
{ id: 'todo-2', name: 'Repeat', completed: false },
];

const filterBy= {
All: (order) => true,
Active: (order) => !order.completed,
Completed: (order) => order.completed,
};
const DisplayList = () => {
const [filter, setFilter] = useState('All');
const [orders, setOrders] = useState(DATA);
console.log(filterBy[filter]);
const orderList = orders.filter(filterBy[filter]).map(order => (
<li key={order.id} id={order.id}>
<p>{order.name}</p>
<p>{`${order.completed}`}</p>
</li>
));
return (
<>
<button onClick={() => setFilter('Active')}>
view active orders ⬇
</button>
{orderList}
</>
);
};
export default function App() {
return (
<DisplayList />
);
}

代码沙箱中的工作示例

问题在这里:

const FILTER_MAP = {
ALL: () => true, // HERE (ALL) is all CAPS
Active: (order) => !order.completed,
Completed: (order) => order.completed
};

和你试图访问(所有)一个属性，不存在于FILTER_MAP

const [filter, setFilter] = useState('All'); // not the same as (ALL) in FILTER_MAP 

，这是一个很好的例子，说明为什么你应该使用类型脚本，因为TS可以帮助你找到这个打字错误。