React：实现列表中指定元素的显示与隐藏

我来帮你搞定这个问题！你现在遇到的核心问题有两个：一是状态的定义位置完全错误，二是用了一个全局的状态来控制所有列表项的显示隐藏，自然点击任何按钮都会影响整个列表。咱们一步步来修复：

问题分析 #

1. 状态定义违规：你把const [showurl, setShowurl] = useState(true);放在了handleChangeUpdate这个事件处理函数里面，这违反了React Hooks的规则——Hooks必须在组件的顶层作用域调用，不能嵌套在函数、条件判断里。
2. 全局状态无法区分单个项：单个showurl变量是全局的，所有列表项都依赖它，所以点击任何按钮都会切换整个列表的显示状态，而不是单个项。

解决方案：给每个列表项单独维护可见状态 #

我们可以把每个列表项的可见状态直接存在列表项的对象里，这样就能精准控制单个项的显示/隐藏了。下面是修复后的完整代码：

const F = () => { 
  // 初始化列表时给每个项添加isVisible字段，默认显示
  const initialList = [ 
    { id: "a", title: "Random title 1", description: "Random description 1", isVisible: true }, 
    { id: "b", title: "Random title 2", description: "Random description 2", isVisible: true }, 
    { id: "c", title: "Random title 3", description: "Random description 3", isVisible: true } 
  ]; 
  const [list, setList] = React.useState(initialList); 

  // 处理输入框更新的函数，保持原有逻辑
  function handleChangeUpdate(id, event) { 
    const { name, value } = event.target; 
    const newList = list.map((item) => { 
      if (item.id === id) { 
        return { ...item, [name]: value }; 
      } 
      return item; 
    }); 
    setList(newList); 
  } 

  // 切换单个列表项的可见状态
  const toggleItemVisibility = (itemId) => {
    const updatedList = list.map(item => {
      if (item.id === itemId) {
        return { ...item, isVisible: !item.isVisible };
      }
      return item;
    });
    setList(updatedList);
  };

  return ( 
    <div> 
      <ul> 
        {/* 遍历列表，根据每个item的isVisible决定是否渲染 */}
        {list.map((item) => (
          item.isVisible && (
            <li key={item.id}>
              <label>
                <input 
                  type="checkbox" 
                  name="select" 
                  onClick={() => toggleItemVisibility(item.id)} 
                />
                <span />
              </label>
              <input 
                name="title" 
                className="form-control" 
                onChange={(e) => handleChangeUpdate(item.id, e)} 
                defaultValue={item.title} 
              />
              <input 
                name="description" 
                className="form-control" 
                onChange={(e) => handleChangeUpdate(item.id, e)} 
                defaultValue={item.description} 
              />
            </li>
          )
        ))}
      </ul> 
    </div> 
  ); 
}; 
const rootElement = document.getElementById("root"); 
ReactDOM.render( <F />, rootElement );

关键修改点说明 #

1. 初始化列表添加isVisible字段：给每个列表项默认添加isVisible: true，用来标记当前项是否显示。
2. 重构toggleItemVisibility函数：接收item的id作为参数，通过map遍历列表，只修改对应id项的isVisible状态，这样就只会影响单个项。
3. 修复JSX渲染逻辑：原来的代码把整个列表的渲染放在了全局状态判断里，现在改成遍历每个项时判断item.isVisible，实现单个项的独立控制。
4. 修正状态定义位置：把所有状态和事件处理函数都放在组件顶层，符合React Hooks的使用规则。

这样修改后，点击每个列表项的复选框，就只会隐藏/显示对应的那一项，不会影响其他列表元素啦！

内容的提问来源于stack exchange，提问作者AlyaKra