React 中使用 useEffect 遍历对象获取特定值

可以使用 Object.keys() 方法遍历对象的键，然后根据键取到对应的值，最后将需要的值保存到一个数组中。具体实现代码如下：

import { useEffect, useState } from 'react';

function Example() {
  const [values, setValues] = useState({
    key1: 'value1',
    key2: 'value2',
    key3: 'value3',
    key4: 'value4',
    key5: 'value5',
    key6: 'value6',
    key7: 'value7',
    key8: 'value8',
    key9: 'value9',
    key10: 'value10',
    key11: 'value11',
    key12: 'value12',
    key13: 'value13',
    key14: 'value14',
    key15: 'value15',
    key16: 'value16',
    key17: 'value17',
    key18: 'value18',
    key19: 'value19',
    key20: 'value20'
  });
  const [selectedValues, setSelectedValues] = useState([]);

  useEffect(() => {
    const keys = Object.keys(values);
    const selectedKeys = [keys[4], keys[7], keys[14]];
    const selectedValues = selectedKeys.map(key => values[key]);
    setSelectedValues(selectedValues);
  }, [values]);

  return (
    <div>
      <h3>Selected Values:</h3>
      <ul>
        {selectedValues.map(value => (
          <li key={value}>{value}</li>
        ))}
      </ul>
    </div>
  );
}

export default Example;

在上面的代码中，我们使用 useState() 来定义了一个包含 20 个键值对的对象 values，然后使用 useEffect() 在组件渲染时遍历该对象，取出第 5 个、第 8 个和第 15 个键，并将它们对应的值保存在 selectedValues 数组中。最后将 selectedValues 数组中的值渲染到页面上。