如何在 react hooks 数组中获取对象的值？

Question

下午好，很少在这里写文章。但是现在真的看不懂了

我正在使用 React Select 来显示 select。在 onChange 属性中，我传递了一个形成对象并将其写入 UseStat 的函数。但是后来我尝试使用 find 和从中获取一组值。

const [selectedSpecificationValues, setSelectedSpecificationValues] = useState([])

const setSelectedSpecificationValuesHandler = (e, s) => {
    const maybeSelectedSpecification = selectedSpecificationValues.find(
        ss => ss._id === s._id
    )

    const objForWrite = {
        _id: s._id,
        name: s.name,
        values: e,
    }

    if (maybeSelectedSpecification) {
        const index = selectedSpecificationValues.indexOf(
            maybeSelectedSpecification
        )
        let newArr = [...selectedSpecificationValues]
        newArr[index] = objForWrite

        setSelectedSpecificationValues(newArr)
    } else {
        setSelectedSpecificationValues([
            ...selectedSpecificationValues,
            objForWrite,
        ])
    }
}

const ssTestVal = Id => {
    let result = []
    if (selectedSpecificationValues.length > 0) {
        const foundItem = selectedSpecificationValues.find(i => i._id === Id)
        console.log(Id, foundItem)
        if (foundItem) {
            result = foundItem.values
        }
    }
    return result
}

/* specifications = [
    {
        values: [
            {
                value: 0,
                label: '480 min',
            },
            {
                value: 1,
                label: '120 min',
            },
        ],
        _id: '5fe74eae07905e53ebf263ec',
        name: 'Duration',
        slug: 'duration',
        createdAt: '2020-12-26T14:54:38.362Z',
        updatedAt: '2020-12-29T08:37:18.962Z',
        __v: 1,
    },
    {
        values: [
            {
                value: 0,
                label: 'Photobook',
            },
            {
                value: 1,
                label: 'Photocard',
            },
            {
                value: 2,
                label: 'Album',
            },
            {
                value: 3,
                label: 'DVD',
            },
            {
                value: 4,
                label: 'Stickers',
            },
            {
                value: 5,
                label: 'CD',
            },
        ],
        _id: '5fe74e9107905e53ebf263eb',
        name: 'Includes',
        slug: 'includes',
        createdAt: '2020-12-26T14:54:09.267Z',
        updatedAt: '2020-12-26T16:10:16.283Z',
        __v: 9,
    },
] */

{
    specifications &&
        specifications.map((s, idx) => (
            <Select
                classNamePrefix='select2-selection'
                options={s.values}
                value={() => ssTestVal(s._id)}
                onChange={e => setSelectedSpecificationValuesHandler(e, s)}
                isMulti
            />
        ))
}

同样重要的是要了解我循环了很多 select 离子以 select 不同的特征及其值。

我很乐意提供帮助！

https://codesandbox.io/s/serverless-night-kez18?file=/src/App.js

Answer 1

您计算子 select 输入值的方式似乎是个小问题。您将其定义为回调。

<Select
  classNamePrefix="select2-selection"
  options={s.values}
  value={() => ssTestVal(s._id)} // <-- not correct, not a callabck
  onChange={(e) => setSelectedSpecificationValuesHandler(e, s)}
  isMulti
/>

应该立即调用它来计算和return输入值。

<Select
  classNamePrefix="select2-selection"
  options={s.values}
  value={ssTestVal(s._id)} // <-- invoke immediately for return value
  onChange={(e) => setSelectedSpecificationValuesHandler(e, s)}
  isMulti
/>

如何在 react hooks 数组中获取对象的值？

How to get value of their object in react hooks array?

javascript

reactjs

react-select