state作為訪問對象的參數？

Question 1

（我是react btw的新手）所以我正在嘗試制作一個代碼：

讀取兩個選擇框和一個輸入的值
使用select的值讀取Javascript對象
將輸入的值乘以對象的值。

到目前為止，我已經做到了以下幾點：

const valores = {
  longitud: {
    metros: {
      val: 1,
    },
    centímetros: {
      val: 0.01,
    },
  fuerza: {
    newtons: {
      val: 1,
    },
    dina: {
      val: 0.0000001,
    },
  }
}
const [tipo, setTipo] = useState("longitud")
  const [uIn, setUIn] = useState("metros")
  const [val, setVal] = useState(0)
  const unidades = {
    longitud: [
      "metros",
      "centímetros",
    ],
    fuerza: ["newtons", "dinas"],
  }
  return (
    <div>
      <select
        id="tipoMedida"
        value={tipo}
        onChange={e => setTipo(e.target.value)}
      >
        <option value="longitud">Longitud</option>
        <option value="fuerza">Fuerza</option>
        
      </select>

      <input type="number" id="valor" value={val}
        onChange={e => setVal(e.target.value)}/>

      <select id="unidadOrigen" value={uIn}
        onChange={e => setUIn(e.target.value)}>
        {unidades[tipo].map(u => {
          return <option value={u}>{u}</option>
        })}
      </select>

這部分工作正常。但是，我不知道下一步該怎么做。我想顯示一個顯示結果的文本，為此我做了此操作<div id="resultado">El resultado es {val*valores[tipo[uIn[val]]]}</div> but它什么也沒顯示，{val*valores[tipo[uIn.val]]}說uIn是未定義的。我的代碼有問題嗎？如果沒有，我怎么才能得到結果？

Question 2

您訪問對象的方式導致了此問題。

正確的方法是

const result = val * valores[tipo][uIn].val;
console.log(result);

最后的代碼看起來是這樣的。

請注意，我對第一次選擇的onChange處理程序進行了一些更改，因為這會導致一個錯誤。修改tipo時，需要更改uIn的默認值

import { useState } from "react";

export default function App() {
  const valores = {
    longitud: {
      metros: {
        val: 1
      },
      centímetros: {
        val: 0.01
      }
    },
    fuerza: {
      newtons: {
        val: 1
      },
      dinas: {
        val: 0.0000001
      }
    }
  };
  const [tipo, setTipo] = useState("longitud");
  const [uIn, setUIn] = useState("metros");
  const [val, setVal] = useState(0);
  const unidades = {
    longitud: ["metros", "centímetros"],
    fuerza: ["newtons", "dinas"]
  };

  const result = val * valores[tipo][uIn].val;

  return (
    <div>
      <select
        id="tipoMedida"
        value={tipo}
        onChange={(e) => {
          setTipo(e.target.value);
          setUIn(unidades[e.target.value][0]);
        }}
      >
        <option value="longitud">Longitud</option>
        <option value="fuerza">Fuerza</option>
      </select>

      <input
        type="number"
        id="valor"
        value={val}
        onChange={(e) => setVal(e.target.value)}
      />

      <select
        id="unidadOrigen"
        value={uIn}
        onChange={(e) => setUIn(e.target.value)}
      >
        {unidades[tipo].map((u) => {
          return (
            <option key={u} value={u}>
              {u}
            </option>
          );
        })}
      </select>

      <div id="resultado">El resultado es {result}</div>
    </div>
  );
}

提示：您可以使用javascript方法Object.keys()動態生成選項，而不是對unidades變量中的值進行硬編碼。這樣，當添加新選項時，就不需要在很多地方進行太多更改。

Answer 1

您訪問對象的方式導致了此問題。

正確的方法是

const result = val * valores[tipo][uIn].val;
console.log(result);

最后的代碼看起來是這樣的。

請注意，我對第一次選擇的onChange處理程序進行了一些更改，因為這會導致一個錯誤。修改tipo時，需要更改uIn的默認值

import { useState } from "react";

export default function App() {
  const valores = {
    longitud: {
      metros: {
        val: 1
      },
      centímetros: {
        val: 0.01
      }
    },
    fuerza: {
      newtons: {
        val: 1
      },
      dinas: {
        val: 0.0000001
      }
    }
  };
  const [tipo, setTipo] = useState("longitud");
  const [uIn, setUIn] = useState("metros");
  const [val, setVal] = useState(0);
  const unidades = {
    longitud: ["metros", "centímetros"],
    fuerza: ["newtons", "dinas"]
  };

  const result = val * valores[tipo][uIn].val;

  return (
    <div>
      <select
        id="tipoMedida"
        value={tipo}
        onChange={(e) => {
          setTipo(e.target.value);
          setUIn(unidades[e.target.value][0]);
        }}
      >
        <option value="longitud">Longitud</option>
        <option value="fuerza">Fuerza</option>
      </select>

      <input
        type="number"
        id="valor"
        value={val}
        onChange={(e) => setVal(e.target.value)}
      />

      <select
        id="unidadOrigen"
        value={uIn}
        onChange={(e) => setUIn(e.target.value)}
      >
        {unidades[tipo].map((u) => {
          return (
            <option key={u} value={u}>
              {u}
            </option>
          );
        })}
      </select>

      <div id="resultado">El resultado es {result}</div>
    </div>
  );
}

提示：您可以使用javascript方法Object.keys()動態生成選項，而不是對unidades變量中的值進行硬編碼。這樣，當添加新選項時，就不需要在很多地方進行太多更改。

state作為訪問對象的參數？

熱門問答

基于2列條件在新列中返回值

如何修復錯誤“'NoneType'對象沒有屬性'text'”

從字符串創建數組的數組

Python打印內存位置而不是列表元素

替換pyspark dataframe中列中的特定字符

正則表達式：提取逗號之前的所有內容，如果沒有逗號，則提取所有文本，除了特定的數字-逗號-數字組合

SQl數據取的不完整是什么問題

tortoiseSVN可以連接本地服務器，其他主機不能連接

警告：array_keys（）期望參數1為數組，給定為null

shiro 執行subject.logout()等方法后 ShiroUtils.getSysUser() 緩存依然清除失敗

Angular版本升級出現問題了

vue 按照條件切換主題本地可以，打包不管用

state作為訪問對象的參數？

熱門問答

基于2列條件在新列中返回值

如何修復錯誤“'NoneType'對象沒有屬性'text'”

從字符串創建數組的數組

Python打印內存位置而不是列表元素

替換pyspark dataframe中列中的特定字符

正則表達式：提取逗號之前的所有內容，如果沒有逗號，則提取所有文本，除了特定的數字-逗號-數字組合

SQl數據取的不完整是什么問題

tortoiseSVN可以連接本地服務器，其他主機不能連接

警告：array_keys（）期望參數1為數組，給定為null

shiro 執行subject.logout()等方法后 ShiroUtils.getSysUser() 緩存依然清除失敗

Angular版本升級出現問題了

vue 按照條件切換主題本地可以，打包不管用

正則表達式：提取逗號之前的所有內容，如果沒有逗號，則提取所有文本，除了特定的數字-逗號-數字組合

vue 按照條件切換主題本地可以，打包不管用