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