我希望多个组件之间只有一个组件状态为真答案

【问题标题】：I want only one component state to be true between multiple components我希望多个组件之间只有一个组件状态为真
【发布时间】：2021-11-21 14:29:18
【问题描述】：

我将组件称为跟随者

{userAddresses.map((useraddress, index) => {
            return (
              <div key={index}>
                <Address useraddress={useraddress} />
              </div>
            );
})}

他们的状态：

const [showEditAddress, setShowEditAddress] = useState(false);

这就是我处理他们的状态的方式

const switchEditAddress = () => {
    if (showEditAddress === false) {
      setShowEditAddress(true);
    } else {
      setShowEditAddress(false);
    }
  };

【问题讨论】：

您的代码到底有什么问题？你可以说得更详细点吗？因为现在您发布的代码只是说您正在切换布尔状态更改。它与您关于多个组件之间的一种状态的问题标题无关。
我有地址数组，我正在映射它们并调用地址组件，该组件有一个编辑按钮，单击另一个组件编辑地址打开，如果我们单击另一个地址组件的编辑，那么我想要将其他组件的 showEditAddress 更改为 false

标签： reactjs react-hooks

【解决方案1】：

好吧，如果你想在 true 和 false 之间切换，最好在 react 中使用 useEffect 挂钩中的状态。

useEffect 每次都会渲染组件，并且会进入你的条件来设置状态为真或假。

在你的情况下，你可以尝试以下方法：

useEffect(() => {  if (showEditAddress === false) {
  setShowEditAddress(true);
} else {
  setShowEditAddress(false);
} }, [showEditAddress])

通过使用useEffect，您将能够将布尔值重置为您的条件。还可以找到下面的链接以对useEffect 做出更多反应。 https://reactjs.org/docs/hooks-effect.html

【讨论】：

但这使得组件运行在无限状态
这只会在状态更改时重新渲染组件以检查状态，并将旧状态更改为新状态。要更改旧状态，您需要重新渲染组件。这就是使用 useEffect 的重点

【解决方案2】：

在我看来，最好将你的观点保留在父组件中，你需要弄清楚真相应该是什么。如果您一次只希望编辑一个组件，那么我只需在父组件中识别您要编辑的地址并从那里开始。最好给每个地址一个唯一的 id，但也可以使用索引。您可以执行以下操作：

用户地址组件

const UserAddress = ({index, editIndex, setEditIndex, userAddress}) => {
  return(
    <div>
      {userAddress}
      <button onClick={() => setEditIndex(index)}>Edit</button>
      {editIndex === index && <div style={{color: 'green'}}>Your editing {userAddress}</div>}
    </div>
  )
}

父组件

const UserAddresses = () => {
  const addresses = ['120 n 10th st', '650 s 41 st', '4456 Birch ave']
  const [editIndex, setEditIndex] = useState(null)

  return userAddresses.map((userAddress, index) => <UserAddress key={index} index={index} editIndex={editIndex} setEditIndex={setEditIndex} userAddress={userAddress}/>;
}

由于您没有发布实际组件，我只能为您提供示例组件，但这应该让您了解如何实现您想要的。

【讨论】：