将 React 对象设置为 props 中给定的对象

Question

我试图根据传递到组件中的 props (props.toothData) 来设置 React 中对象 (teethData.data) 的状态。如果传递的 props 对象的长度为零，则它会设置。如果 props.toothData 长度为零，则为变量 givenToothData 赋予默认值，以便 teethData.data 具有默认值，否则，< code>teethData.data 只是设置为 props.toothData。但是，如果 props.ToothData 长度不为零，则 teethData.data 也不会改变我想要的方式

下面是我的代码，有什么建议吗？

function TableArray(props) {
  const navigate = useNavigate();
  console.log(props.toothData);

  var givenToothData = props.toothData;
  if (Object.keys(props.toothData).length === 0) {
    console.log("this happened", props.toothData);
    givenToothData = {
      1: {
        pp: false,
        C14: false,
        GI0: false,
        GI23: false,
        PDI: false,
        GR: false,
        F13: false,
        M03: false,
      },
      2: {
        AB: false,
        AT: false,
        EH: false,
        TI: false,
        TLUX: false,
        O: false,
        GH: false,
        OST: false,
        ONF: false,
        FX: false,
        CA: false,
        OM: false,
        D: false,
        DX: false,
      },
      3: { RTR: false, TR: false, SN: false, TA: false },
      4: {
        TFXUCF: false,
        TFXCCF: false,
        TFXUCRF: false,
        TNE: false,
        TPE: false,
      },
    }
    console.log("this happened", givenToothData);
  }

  const [teethData, setTeethData] = useState({
    tooth: props.tooth,
    data: givenToothData
  });

  console.log(teethData.data, "runthisfirst \n", givenToothData, props.teethData);
  

Answer 1

useState 钩子的参数仅在组件首次安装时分配一次。在后续函数执行时，它不会设置该值。每当你的 props 改变时，尝试使用 useEffect 设置状态。即，useEffect(() => { // 更新状态的逻辑 },[props.toothData])。