我有一个对象数组，我试图将数组中一个元素的所有值作为prop传递给一个子组件：
const ParentComponent = () => {
const [selectedBillNumber,setSelectedBillNumber] = useState(2);
const data = [
{bill_number: 1, key2: value2, key3: value3, etc...},
{bill_number: 2, key2: value2, key3: value3, etc...},
{bill_number: 3, key2: value2, key3: value3, etc...},
];
return <ChildComponent {...data.filter(elem => elem.bill_number === selectedBillNumber)} />;
}我期望filter函数在应用于数据数组时返回bill_number等于2的对象，并且spread操作符解构该对象，以便我可以将对象的键作为 prop 传递给我的子组件，如下所示：
const ChildComponet = ({ bill_number, key2, key3, etc... }) => {
// use the keys here
}但是，当我控制台记录它时：console.log({...data.filter(elem => elem.bill_number === selectedBillNumber)})，我得到的是另一个对象，它的键为0，并Map到我最初期望的值：
为了解决这个问题，我在父组件中返回以下代码：return <ChildComponent {...data.filter(elem => elem.bill_number === selectedBillNumber)["0"]} />;
我想理解为什么我得到了一个新的对象，键0Map到我需要的值，而不是直接接收值，我应该在代码中做些什么修改，以直接获得这些值，而不必在过滤函数的结尾使用["0"]。
2条答案
按热度按时间mlnl4t2r1#
这是因为你使用过滤器：这个函数返回一个数组：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter .
如果只需要一个项目，可以使用find：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find
31moq8wy2#
正如Konrad所评论的，filter函数将返回一个数组，即使它只包含一个元素，你仍然需要将它作为数组引用，所以你需要选择第一个元素（[“0”]），如果这让你感到不舒服，你可以使用数组的.pop（）方法：