从对象数组中提取数据

Question

我有一个看起来像这样的对象数组：

0: {observationId: 39986776, patientId: 3376, type: "painLevel", diastolicValue: null, systolicValue: null, …} 1: {observationId: 39970831, patientId: 3376, type: "bloodPressure", diastolicValue: 75, systolicValue: 132, …} 2: {observationId: 39970832, patientId: 3376, type: "heartrate", diastolicValue: null, systolicValue: null, …}

这些对象中的每一个都有一组我需要进入组件的信息。我试图映射对象以根据内部保存的类型为每个对象设置一个状态变量但是我无法设置它们这是我试图做的：

const PCCVitals = ({PCCObservations}) => {
  const [painLevel, setPainLevel] = useState({});
  const [BP, setBP] = useState({})
  const [OS, setOS] = useState({})
  const [heartRate, setHeartRate] = useState({})
  const [respiration, setRespiration] = useState({})
  const [weight, setWeight] = useState({})
  const [temp, setTemp] = useState({})

  useEffect(() => {
    observationMap
  }, [PCCObservations])
  
  const observationMap = () => {

  PCCObservations.map(item => {
    if(item.type === "painLevel"){
      setPainLevel(item)
    } if(item.type === "bloodPressure"){
      setBP(item)
    } if(item.type === "heartrate"){
      setHeartRate(item)
    } if(item.type === "oxygenSaturation" ){
      setOS(item)
    } if (item.type === "respirations"){
      setRespiration(item)
    } if(item.type === "weight"){
      setWeight(item)
    } if(item.type === "temperature"){
      setTemp(item)
    }
  })
}

  console.log(temp, "OBS PROPS")
  return(
    <>
    <ul>
      <li>{`Temperature - ${temp.value}${temp.unit}`}</li>
    </ul>
    </>
  )
 

}

我的想法是，如果我接受 PCCObservations 道具并对其进行映射，检查 item.type 是否等于我正在寻找的类型，那么我应该能够将状态设置为该对象。这个实现不起作用...有人可以解释一下它为什么不起作用以及我如何修复它以按照我想要的方式运行？

Answer 1

您可以维护一个包含PCCObservations 中所有内容的单一状态，而不是拥有多个useState：

const getInitialState = someObvs => {
  return someObvs.reduce((acc, obs) => {
    acc[obs.type] = obs;
    return acc;
  }, {});
};

const PCCVitals = ({ PCCObservations }) => {

    const [observations, setObservations] = useState(getInitialState(PCCObservations));

    // ...

    return <>{observations.painLevel.patientId}</>;
};

现在observations 状态将如下所示：

 {
    painLevel: {
        observationId: 39986776,
        patientId: 3376,
        type: 'painLevel',
        diastolicValue: null,
        systolicValue: null,
        // ...
    },
    // ...
};

这是实现上述内容的StackBlitz。