对同一页上不同列表的设置索引作出反应

Question

我在一页上有两个列表，我试图只打开一个项目，其中包含我在特定列表中选择的项目的索引，但不幸的是，我在列表A上选择的内容也会在列表B上被选中。我给索引命名不同，索引也不一样，但这种情况一直在发生。我的代码在沙箱这里中。如能就我所做的错事提供任何协助/建议，我们将不胜感激。

 const recentVisits = [
    {
      id: '1',
      visit_type: 'Adult diabetes return visit',
      clinic: 'NCD clinic',
      visit_date: '2022-02-23T22:44:32.000+0000',
    },
    {
      id: '2',
      visit_type: 'Adult HIV return visit',
      clinic: 'HIV clinic',
      visit_date: '2022-02-23T22:44:32.000+0000',
    },
    {
      id: '3',
      visit_type: 'Adult HIV return visit',
      clinic: 'HIV clinic',
      visit_date: '2022-02-23T22:44:32.000+0000',
    },
  ];

  const futureVisits = [
    {
      id: '1',
      visit_type: 'Adult HIV return visit',
      clinic: 'HIV clinic',
      visit_date: '2022-02-23T22:44:32.000+0000',
    },
  ];

  const [recentVisitsIndex, setRecentVisitsIndex] = useState(0);
  const [show_priority, setShowPriority] = useState(false);
  const [futureVisitsIndex, setFutureVisitsIndex] = useState(0);
  const [prioritySwitcherValue, setPrioritySwitcherValue] = useState(0);

  return (
    <div>
      <div className={styles.row}>
        <p className={styles.heading}> {recentVisits.length} visits scheduled for +/- 7 days </p>
        <TileGroup name="tile-group" defaultSelected="forever" className="trigger-tile">
          {recentVisits.map((visit, index) => (
            <RadioTile
              id={visit.id}
              value={visit.id}
              key={index}
              className={styles.visitTile}
              onClick={() => {
                setShowPriority(true);
                setRecentVisitsIndex(index);
              }}>
              <div className={styles.helperText}>
                <p>
                  index : {index} selectedindex : {recentVisitsIndex}
                </p>

                <p className={styles.primaryText}>{visit.visit_type}</p>
                <p className={styles.secondaryText}>
                  {visit?.visit_date} · {visit.clinic}
                </p>
                {show_priority && index == recentVisitsIndex ? (
                  <ContentSwitcher
                    size="sm"
                    className={styles.prioritySwitcher}
                    onChange={({ index }) => {
                      setPrioritySwitcherValue(index);
                    }}>
                    <Switch name={'Not Urgent'} text="Not Urgent" />
                    <Switch name={'Priority'} text="Priority" />
                    <Switch name={'Emergency'} text="Emergency" />
                  </ContentSwitcher>
                ) : null}
              </div>
            </RadioTile>
          ))}
        </TileGroup>
      </div>

      {/* List two */}

      <div className={styles.row}>
        <p className={styles.heading}> {futureVisits.length} visits scheduled for dates in the future </p>
        <TileGroup name="tile-group" defaultSelected="default-selected">
        {futureVisits.map((visit, ind) => (
          <RadioTile
            value={visit.id}
            key={ind}
            className={styles.visitTile}
            onClick={() => {
              setShowPriority(true);
              setFutureVisitsIndex(ind);
            }}>
            <div className={styles.helperText}>
              <p>
                index : {ind} selectedindex : {futureVisitsIndex}
              </p>
              <p className={styles.primaryText}>{visit.visit_type}</p>
              <p className={styles.secondaryText}>
                {visit?.visit_date} · {visit.clinic}
              </p>

              {show_priority && ind == futureVisitsIndex ? (
                <ContentSwitcher
                  size="sm"
                  className={styles.prioritySwitcher}
                  onChange={({ index }) => setPrioritySwitcherValue(index)}>
                  <Switch name={'Not Urgent'} text={'Not Urgent'} />
                  <Switch name={'Priority'} text={'Priority'} />
                  <Switch name={'Emergency'} text={'Emergency'} />
                </ContentSwitcher>
              ) : null}
            </div>
          </RadioTile>
        ))}
      </TileGroup>
      </div>

   </div>
  );

​

​

Answer 1

你最近有一次积极的访问，将来也有一次积极的访问。

但是这两个列表都共享show_priority标志和prioritySwitcherValue值。因此，您可以看到当前正在进行的近期和未来访问的优先事项。

索引不冲突，更改索引时也不会更新索引。但是，您确实显示了优先级，并为两个活动访问设置了prioritySwitcherValue。