ReactNative：如何在已經有狀態的情況下修改變數狀態？-有解無憂

我想創建 4 個按鈕，當我單擊其中一個時，會出現一個文本，而其他文本則消失。

但是，當我單擊我的解決方案時，文本仍然是相同的。我可以更改初始值，但之后無法更改。

這是我的代碼：

  const [couleur, setCouleur] = useState("");
  var [state, setState] = useState({
    v1Visible: false,
    v2Visible: false,
    v3Visible: true,
    v4Visible: false,
  });
  async function cop() {
    await navigator.clipboard.writeText(couleur);
    alert("Couleur copiée");
  }

  useEffect(() => {
    if (couleur !== "") {
      cop();
    }
  }, [couleur]);

  state = {
    v1Visible: false,
    v2Visible: false,
    v3Visible: false,
    v4Visible: true,
  };

這里的 couleur 部分是另一種狀態。這是必要的，是我頁面的第一部分。

          <Text style={styles.texteti}>Heading, paragraphe, lien</Text>
          <TouchableOpacity
            onPress={() =>
              setState({
                v1Visible: false,
                v2Visible: true,
                v3Visible: false,
                v4Visible: false,
              })
            }
          >
            <Text>Here</Text>
          </TouchableOpacity>
          {state.v1Visible && (
            <View>
              <Text>View 1</Text>
            </View>
          )}
          {state.v2Visible && (
            <View>
              <Text>View 2</Text>
            </View>
          )}
          {state.v3Visible && (
            <View>
              <Text>View 3</Text>
            </View>
          )}
          {state.v4Visible && (
            <View>
              <Text>View 4</Text>
            </View>
          )}
        </View>

texteti: {
    fontSize: 16,
    marginLeft: "7%",
    fontWeight: "600",
  },

uj5u.com熱心網友回復：

嗨，我認為最好像這樣宣告你的狀態變數并將所選值設定為另一個狀態，你可以更簡化這個答案，我希望它對你有用

var [state, setState] = useState([
      'v1Visible',
      'v2Visible',
      'v3Visible',
      'v4Visible',
  ]);
 const [selected,setSelected]=useState("")

   {...}

     <Text style={styles.texteti}>Heading, paragraphe, lien</Text>
      {state.map(i=> <TouchableOpacity
        onPress={(i) =>
         setSelected(i)
        }
      >
        <Text>{i} Here</Text>
        
      </TouchableOpacity>)}
      {selected=="v1Visible" && (
        <View>
          <Text>View 1</Text>
        </View>
      )}
      {selected=="v2Visible" && (
        <View>
          <Text>View 2</Text>
        </View>
      )}
      {selected=="v3Visible" && (
        <View>
          <Text>View 3</Text>
        </View>
      )}
      {selected=="v4Visible" && (
        <View>
          <Text>View 4</Text>
        </View>
      )}
    </View>

uj5u.com熱心網友回復：

您應該只更改statewithsetState方法的狀態。

所以洗掉這部分：

state = {
  v1Visible: false,
  v2Visible: false,
  v3Visible: false,
  v4Visible: true,
};

此時更新狀態的正確方法是：

setState({
  v1Visible: false,
  v2Visible: false,
  v3Visible: false,
  v4Visible: true,
});

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/477922.html

標籤：反应打字稿反应式状态

上一篇：TypeScript模板文字陣列連接

下一篇：不可分配給動態渲染組件的型別“IntrinsicAttributes&ContentOutlineProps&ContentBrainstormProps”