资料UI _~_

Question

我无法正确选择listItem

我是一个初学者反应，我有困难的迭代在材料UI中的列表项目。我正在迭代一个json数组并将列表项添加到一个列表中。在单击任何列表项时，列表总是选择最后一个项。

 function handleListItemClick(index) {
    setSelectedIndex(index);

    props.user.updateState(index);
    props.user.setCourseName(props.mycourses[index].courseName);
  }

  function RenderListItem(props) {
    var indents = [];
    let ind = 0;

    for (var key in props.coursevals) {
      indents.push(
        // <span>

        <ListItem
          button
          selected={selectedIndex === key}
          onClick={() => handleListItemClick(key)}
          // onClick={event => handleListItemClick(event, 0)}
          className={classes.ListItem}
          key={key}
        >
          {/* {console.log(key)} */}
          <ListItemIcon>
            <img
              className={classes.courseimg}
              src="../../../public/images/book.png"
            />
          </ListItemIcon>
          <ListItemText primary={props.coursevals[key].courseId} />
          <img
            className={classes.rightarrow}
            src="../../../public/images/rightarrow.png"
          />
        </ListItem>
      );
    }
    return indents;



 }

OnClick事件始终向函数发送最后一个索引。我想发送刚才单击的索引

Answer 1

问题是，变量key对于每次迭代都是相同的(它将在每个循环开始时使用新键进行更新)。您正在传递一个回调，该回调具有对该变量的引用，该变量在迭代结束时将具有最后一个键的值。

我无法测试下面的代码，但它应该能工作。请让我知道。这样做的目的是为每个循环保留对“当前键”的引用，这样每个回调都会引用正确的值。

请注意，为了更加一致，我已经替换了key主体中的所有for外观。实时(而不是在回调时)计算的表达式显然没有这个问题。

另一种更好的方法是使用Function.prototype.bind() (参见MDN)。onClick={handleListItemClick.bind(undefined, key)}。它将传递一个函数，其中嵌入key作为第一个参数。

最后一种选择是使用forEach()而不是for循环，因为每次迭代都会创建一个新的index。(结果与下面的代码相同)。

 function handleListItemClick(index) {
    setSelectedIndex(index);

    props.user.updateState(index);
    props.user.setCourseName(props.mycourses[index].courseName);
  }

  function RenderListItem(props) {
    var indents = [];
    let ind = 0;

    for (var key in props.coursevals) {
      let currentKey = key;
      indents.push(
        // <span>

        <ListItem
          button
          selected={selectedIndex === currentKey}
          onClick={() => handleListItemClick(currentKey)}
          className={classes.ListItem}
          key={currentKey}
        >
          {/* {console.log(currentKey)} */}
          <ListItemIcon>
            <img
              className={classes.courseimg}
              src="../../../public/images/book.png"
            />
          </ListItemIcon>
          <ListItemText primary={props.coursevals[currentKey].courseId} />
          <img
            className={classes.rightarrow}
            src="../../../public/images/rightarrow.png"
          />
        </ListItem>
      );
    }
    return indents;



 }

Answer 2

我想您忘了将事件作为第一个参数传递。

onClick={(event) => handleListItemClick(event, key)}

并且您的handleListItemClick函数应该声明为

function handleListItemClick(event, index) {
    event.preventDefault()
    ...
}

Answer 3

请用map代替for循环好吗？所以您的代码应该如下所示。

props.coursevals.map((courseval, index) => {
  indents.push(
    <ListItem
      key={index}
      button
      selected={selectedIndex === index}
      onClick={() => handleListItemClick(index)}
      className={classes.ListItem}
    >
      <ListItemIcon>
        <img
          className={classes.courseimg}
          src="../../../public/images/book.png"
        />
      </ListItemIcon>
      <ListItemText primary={courseval.courseId} />
      <img
        className={classes.rightarrow}
        src="../../../public/images/rightarrow.png"
      />
    </ListItem>
  );
});

希望这能帮到你！