如何从嵌套的动态创建的组件中更改 React 状态？

Question

我从数据库中提取项目信息，然后根据我有多少项目，我推送到一个数组并渲染。问题是由于某种原因“dropdownOptions”不会在显示和隐藏之间切换。

我基本上只是希望能够单击下拉箭头并让它显示“删除”或“设置”等选项。也不确定我是否需要为每个创建的项目组件创建一个单独的 id。

代码片段：

// Using hook to set display of dropdown to false

const [dropdownOptions, setDropdownOptions] = useState(false);


// This piece automatically renders clickable projects from database

const pList = [];
                    for (var i = 0; i < project_list.length; i += 1) {
                      var projectName = project_list[i]
                      pList.push (
                          <div className="projects" key={i}>
                              <div className="projectName">Name: <div className="projectText">{projectName}</div></div>
                              <div className="projectDate"> Date Created: <div className="projectText">{date}</div></div>
                              <div className="projectLabels">LabelsLeft:</div>  
                              <div className="drop">
                                  <div className="dropArrow" onClick{setDropdownOptions(!dropdownOptions)}>
                                        {dropdownOptions ? <ProjectDropdown/> : null}
                                  </div>
                              </div>
                          </div>
                          );
                    };
                    setpList(pList);
                })


// Then I simply render the component "pList"

        return (
      <div className="container">
        <div className="projectsContainer">
          <div className="projectsTitle">
            Projects:
            <div className="addProject" onClick={toggleShow}></div>
          </div>
          {pList}
          <div className="message">
              {message}
          </div>
        </div>
      </div>
    )

用户在项目上按下 droparrow 之前的理想外观是这样的

然后是这个，但只针对点击的项目

Answer 1

您必须选择解决此类问题：

1- 为列表中的每个项目创建一个状态，对于每个项目，您都有一个 boolean 可以判断该项目是否已打开其下拉列表

2- 制作单个状态项，但将其设为代表单击项 ID 的数字，当该 ID 与 state 匹配时，您打开该项目的下拉列表

const [selectedItem, setSelectedItem] = useState(-1);

在你的 jsx 中

<div className="projects" key={i}>
    <div className="projectName">Name: <div className="projectText">{projectName}</div></div>
    <div className="projectDate"> Date Created: <div className="projectText">{date}</div></div>
    <div className="projectLabels">LabelsLeft:</div>
    <div className="drop">
        <div className="dropArrow" onClick{()=>setSelectedItem(i)}>
            {selectedItem == i ? <ProjectDropdown /> : null}
        </div>
    </div>
</div>

作为建议，最好添加从您的 API 获取的真实 id，因为传递给每个项目的密钥对于反应非常重要，而不仅仅是显示下拉列表。

---

建议的解决方案代码

function TestSolution() {

    // Using hook to set display of dropdown to false

    const [selectedItem, setSelectedItem] = useState(-1);


    // This piece automatically renders clickable projects from database

    const pList = project_list.map((projectName, i) => (
        <div className="projects" key={i}>
            <div className="projectName">Name: <div className="projectText">{projectName}</div></div>
            <div className="projectDate"> Date Created: <div className="projectText">{date}</div></div>
            <div className="projectLabels">LabelsLeft:</div>
            <div className="drop">
                <div className="dropArrow" onClick{() => setSelectedItem(i)}>
                    {selectedItem == i ? <ProjectDropdown /> : null}
                </div>
            </div>
        </div>
    ))



    // Then I simply render the component "pList"

    return (
        <div className="container">
            <div className="projectsContainer">
                <div className="projectsTitle">
                    Projects:
                    <div className="addProject" onClick={toggleShow}></div>
                </div>
                {pList}
                <div className="message">
                    {message}
                </div>
            </div>
        </div>
    )
}

react 中的思维方式不同，如果某些数据可以从另一个状态或数据派生出来，就不要为某些数据使用新状态，这会让你的生活更轻松。