React.js 切换隐藏显示显示问题

Question

我在尝试 React 切换显示隐藏时遇到了问题。

我用 map function 调用了我的阵列。然后我用开关 function 做了打开隐藏的情况，但问题从这里开始。 只要我点击任何项目，整个数组就会显示和隐藏。

我在这里做错了什么？ 我只想查看我单击的项目的隐藏显示状态，但所有项目都已列出。

我的代码：

export default function App() {
  const [show, setShow] = useState(false);
  const toggleHandler = () => {
    setShow(!show);
  };

  return (
    <div className="App">
      {example.map((item) => (
        <>
          <div onClick={toggleHandler}>
            <p style={{ margin: 0, fontWeight: "bold" }}>
              {`${item.year} - Total: `} <span>{item.price}</span>
            </p>
          </div>
          {show ? <div>{item.monthlyInstallment}</div> : ""}
        </>
      ))}
    </div>
  );
}

我的示例文件： CodeSandbox

Answer 1

目前 state boolean 是所有项目通用的。

您可以创建一个项目组件，它有自己的本地show state。

如果您不想创建子组件，您可以使用 map，其键将是项目id ，如 state，值将是 boolean show

沙盒： https://codesandbox.io/s/toggle-example-forked-ijt82?file=/src/App.js

Answer 2

您对所有项目使用相同的展示价值。 当它为一个设置值 true 时，它会改变所有。

Answer 3

我稍微修改了您的CodeSandbox ，使<List />成为一个单独的组件，它有自己的show/hide state

const List = (item) => {
  const [show, setShow] = useState(false);
  const toggleHandler = () => {
    setShow(!show);
  };

  return (
    <>
      <div onClick={toggleHandler}>
         <p style={{ margin: 0, fontWeight: "bold" }}>
          {`${item.year} - Total: `} <span>{item.price}</span>
        </p>
      </div>
      {show ? <div>{item.monthlyInstallment}</div> : ""}
    </>
   );
 };


export default function App() {
 return (
   <div className="App">
     {example.map((item) => (<List key={item.id} {...item} />))}
   </div>
 );
}

Answer 4

这是因为数组中的每个项目都使用show state，你可以做的是为每个项目设置一个 show state，这可以通过多种方式完成，但最干净的方法是将项目分离到它自己的组件上并给出它自己的 state。

const Item = ({ item }) => {
  const [show, setShow] = useState(false);
  const toggleHandler = () => {
    setShow(!show);
  };

  return 
        <>
          <div onClick={toggleHandler}>
            <p style={{ margin: 0, fontWeight: "bold" }}>
              {`${item.year} - Total: `} <span>{item.price}</span>
            </p>
          </div>
          {show ? <div>{item.monthlyInstallment}</div> : ""}
        </>
} 

export default function App() {

  return (
    <div className="App">
      {example.map((item) => <Item item={item} />)}
    </div>
  );
}

Answer 5

您只有一个 state ，它只能包含true或false ，因此 React 无法知道显示的是哪个项目或您的列表。

一种解决方案是创建一个为每个“项目”呈现的组件：

export default function App() {
  return (
    <div className="App">
      {example.map((item) => (
        <Test key={item.id} item={item} />
      ))}
    </div>
  );
}

function Test({ item }) {
  const [show, setShow] = useState(false);
  const toggleHandler = () => {
    setShow(!show);
  };

  return (
    <>
      <div onClick={toggleHandler}>
        <p style={{ margin: 0, fontWeight: "bold" }}>
          {`${item.year} - Total: `} <span>{item.price}</span>
        </p>
      </div>

      {show ? <div>{item.monthlyInstallment}</div> : ""}
    </>
  );
}

Answer 6

将show设置为true后，在所有项目的下一次渲染中show将为true ，因此您会看到所有项目。 您需要缩小显示逻辑的范围。

作为修复，您可以做的是：

1. 将被点击的项目的id传递给togglerHandler 。

2. 如果show不等于传递的id ，则将show设置为传递的id 。

3. 如果show已经等于传递的id ，则将show设置为null 。

4. 现在在呈现monthlyInstallment只需检查是否show === item.id ，如果它显示div则不显示。

 const {useState} = React; const example = [ { id: "1", year: "2021", price: 300, monthlyInstallment: 582.5 }, { id: "2", year: 2022, price: 400, monthlyInstallment: 500.5 }, { id: "3", year: "2023", price: 500, monthlyInstallment: 421.5 }, { id: "4", year: "2024", price: 600, monthlyInstallment: 365.5 }, { id: "5", year: "2025", price: "700$", monthlyInstallment: 312.5 } ]; function App() { const [show, setShow] = useState(null); const toggleHandler = (id) => { (id === show)? setShow(null): setShow(id) }; return ( <div> {example.map((item) => ( <div key={item.id}> <div onClick={() => toggleHandler(item.id)}> <p style={{ margin: 0, fontWeight: "bold" }}> {`${item.year} - Total: `} <span>{item.price}</span> </p> </div> {show === item.id? <div>{item.monthlyInstallment}</div>: ""} </div> ))} </div> ); } ReactDOM.render( <App />, document.getElementById("react") );

 <div id="react"></div> <script src="https://unpkg.com/react@17/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>