我在使用材质 UI 在 React JS 中显示列表时遇到问题

Question

我正在尝试使用 react Js 显示列表。有3个网格，我想要的是首先有一个城市列表，当我点击它时，我会得到拥有相同城市的用户，然后当我点击用户时，我应该得到他们的详细信息。还有一个未分配的列表项，如果用户没有城市名称，应该显示它

...
import React from "react";
export default class App extends React.Component 
{

constructor() 
{

   super();

    this.state = {
      city: {
        id: [1, 2, 3],
        name: ["a", "b", "c"]
      },
      user: {
        id: [1, 2, 3, 4, 5],
        name: ["q", "w", "e", "f", "g"],
        cityId: [2, 1, 3]
      },

      detail: {
        userId: [3, 2, 1, 4, 5],
        address: ["usa", "china", "india", "UK", "Japan"]
      },
      marker: null
    };
  }
  change(id) {
    this.setState({ marker: id });
  }
  render() {
    console.log(this.state);
    return (
      <Grid container>
        {/* //city list */}
        <Grid>
          <List>
            {this.state.city.id.map((id, index) => {
              return (
                <ListItem
                  key={id}
                  button
                  onClick={() => {
                    this.change(id);
                  }}
                >
                  <ListItemText primary={this.state.city.name[index]} />
                </ListItem>
              );
            })}
            <ListItem
              key="unassigned"
              button
              onClick={() => {
                this.change("unassigned");
              }}
            >
              <ListItemText primary={"unassigned"} key={"unassigned"} />
            </ListItem>
          </List>
        </Grid>

        {/* //list of users where they live */}
        <Grid>
          {this.state.city.id.map((cityId, index) => {
            switch (this.state.marker) {
              case cityId: {
                return (
                  <List>
                    {this.state.user.id.map((userId, index) => {
                      if (cityId === this.state.user.cityId[index]) {
                        return (
                          <List>
                            <ListItem
                              key={userId}
                              button
                              onClick={() => {
                                this.change(String(userId));
                              }}
                            >
                              <ListItemText
                                primary={this.state.user.name[index]}
                              />
                            </ListItem>
                          </List>
                        );
                      }
                    })}
                  </List>
                );
              }
              case "unassigned": {
                return (
                  <List>
                    {this.state.user.id.map((userId, index) => {
                      if (cityId !== this.state.user.cityId[index]) {
                        return (
                          <List>
                            <ListItem
                              key={userId}
                              button
                              onClick={() => {
                                this.change(String(userId));
                              }}
                            >
                              <ListItemText
                                primary={this.state.user.name[index]}
                              />
                            </ListItem>
                          </List>
                        );
                      }
                    })}
                  </List>
                );
              }
              default:
                return null;
            }
          })}
        </Grid>

        {/* //details of users*/}
        <Grid>
          {this.state.detail.userId.map((userId, index) => {
            switch (this.state.marker) {
              case String(userId): {
                return (
                  <List>
                    <ListItem
                      key={userId}
                      button
                      onClick={() => {
                        this.change(userId);
                      }}
                    >
                      <ListItemText
                        primary={this.state.detail.address[index]}
                      />
                    </ListItem>
                  </List>
                );
              }
              default:
                return null;
            }
          })}
        </Grid>
      </Grid>
    );
  }
}

...

我已经尝试在代码沙箱上实现这个，这里是链接 https://codesandbox.io/s/focused-shamir-y85v9?file=/src/App.js:0-4390

Answer 1

您需要单独跟踪所选用户和城市。

向您的状态添加第二个跟踪器并将所选用户保存在那里。

这是您更新后的工作sandbox。