[当我打开第二个折叠时，状态将获得相同的数据。我需要获取触发崩溃时的数据

Question

您可以在此处查看示例代码。https://codesandbox.io/s/peaceful-germain-rci4d?file=/app.js

我知道我的问题是关于处理状态的，也许您可​​以给我一些想法，谢谢我=================>供以后的帮助

  collapseOnTrigger = id => {
    const newSubData = [
      {
        id: "tests",
        subId: "sub test",
        subData: "sssss ssss"
      },
      {
        id: "ss",
        subId: "1",
        subData: "1"
      }
    ].find(item => item.id === id);
    this.setState({ subDatas: [newSubData] });
  };

        {this.state.list.map((data, index) => (
          // Only do this if items have no stable IDs
          <Collapse onChange={() => this.collapseOnTrigger(data.id)}>
            <Panel header={data.data} key={data.id}>
              {this.state.subDatas.map((data, index) => (
                <ul>
                  <li>{data.subData}</li>
                </ul>
              ))}
            </Panel>
          </Collapse>
        ))}

这里是屏幕截图

Answer 1

无需在该状态下管理subData。 只需对其进行迭代，然后找到所需的值。

{
    this.state.list.map((data, index) => (
        // Only do this if items have no stable IDs
        <Collapse key={data.id} >
            <Panel header={data.data}>
                {
                    <ul>
                        <li>
                            {
                                this.state.subDatas.find(item => item.id === data.id).subData
                            }
                        </li>
                    </ul>
                }
            </Panel>
        </Collapse>
    ))
}

Answer 2

您的问题是，当触发collapseOnTrigger时，您将state.subDatas设置为项目id的子数据，因此在渲染子数据的循环中，它将渲染this.state.subDatas中的唯一项目。

您应在渲染subDatas之前对其进行过滤，当前它已渲染了它的所有元素。

{this.state.subDatas
    .filter(subData => subData.id === data.id)
    .map((subData, index) => (
      <ul key={subData.subId}>
        <li>{subData.subData}</li>
      </ul>
    ))
}