如何在 React ES6 中的 object 中解构数组？

Question

I'm currently developing a React app where an Application will be selected, and the waterTypes for this application should then be returned.

I therefore need to destructure the waterTypes array within my filtered ApplicationData object. The array will have either 1, 2, or 3 values present.

Currently my waterTypes variable is returning undefined to the console. How can I get this to return the waterTypes from the selected Application?

ChoicesProvider.js

import React, { createContext, useState } from "react";

export const ChoicesContext = createContext(null);

export const ChoicesProvider = ({ children }) => {
  const [choices, setChoices] = useState({
    category: null,
  });

  return (
    <ChoicesContext.Provider value={{ choices, setChoices }}>
      {children}
    </ChoicesContext.Provider>
  );
};

ApplicationData.js

const ApplicationData = [
  {
    name: 'App1',
    waterTypes: ['Type 1']
  },
  {
    name: 'App2',
    waterTypes: ['Type 1', 'Type 2']
  },
  {
    name: 'App3',
    waterTypes: ['Type 1', 'Type 2', 'Type 3']
  },
];

export default ApplicationData

Product.js

const Product = () => {
  const { choices, setChoices } = useContext(ChoicesContext);

  const CurrentApplication = ApplicationData.filter(x => x.name === choices.category);

  const { waterTypes } = CurrentApplication;
  console.log(waterTypes);

  return (
    <>
    </>
  );
};

export default Product

Answer 1

Use find instead of filter , to destructure an object not an array of one item

 const ApplicationData = [ { name: 'App1', waterTypes: ['Type 1'] }, { name: 'App2', waterTypes: ['Type 1', 'Type 2'] }, { name: 'App3', waterTypes: ['Type 1', 'Type 2', 'Type 3'] }, ]; const CurrentApplication = ApplicationData.find(x => x.name === 'App3'); const { waterTypes } = CurrentApplication; console.log(waterTypes)

Answer 2

Array.filter always returns an array

const Product = () => {
const { choices, setChoices } = useContext(ChoicesContext);

const CurrentApplication = ApplicationData.filter(x => x.name === choices.category);

const { waterTypes } = CurrentApplication[0];
console.log(waterTypes);

 return (
  <>
  </>

); };

Answer 3

Array.prototype.filter will always return an array, if you want to use filter you have loop over the filteredArray to get the value

 const applicationData = [ { name: 'App1', waterTypes: ['Type 1'] }, { name: 'App2', waterTypes: ['Type 1', 'Type 2'] }, { name: 'App3', waterTypes: ['Type 1', 'Type 2', 'Type 3'] }, ]; const filteredArray = applicationData.filter(data => data.name === 'App3'); for (let item of filteredArray) { const { waterTypes } = item; console.log(waterTypes); }

Also you can use Array.prototype.find is you only want to find one item in the array based of a condition.

For example,

 const applicationData = [ { name: 'App1', waterTypes: ['Type 1'] }, { name: 'App2', waterTypes: ['Type 1', 'Type 2'] }, { name: 'App3', waterTypes: ['Type 1', 'Type 2', 'Type 3'] }, ]; const { waterTypes } = applicationData.find(data => data.name === 'App3'); console.log(waterTypes)