React Native：如何在已经存在状态的情况下修改变量状态？

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,
  };

这里的颜色部分是另一个状态。这是必要的，是我页面的第一部分。

          <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 的状态。

所以删除这部分：

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

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

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

React Native：如何在已经存在状态的情况下修改变量状态？

React Native: How to modify a variable state while there is already a state?

state

typescript

reactjs

react-native