反应本机：如何在已经存在状态时修改变量状态？

Question

我想创建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",
  },

Answer 1

嗨，我认为最好像这样声明您的状态变量并在另一个状态下设置选定的值，您可以更简化此答案，希望它对您有用

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>

Answer 2

您应该仅使用状态使用SetState方法更改状态。

因此，删除此部分：

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

此刻更新状态的正确方法是：

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