Question

我正在尝试使用索引从Array删除项目，我正在将道具从父级组件传递给子级组件以执行此操作，现在我可以看到控制台日志中该组件已被删除，但未呈现该组件

我已将代码发布到SandBox中，因为它在这里会变得混乱

链接：https://codesandbox.io/s/jovial-burnell-qkl7r

Answer 1

只有在发生state更改的情况下，该组件才会重新渲染，而您实际上所做的是将props从parent传递到child，而不是{{1 }}值。因此，您可以尝试以下这种方式，在这种情况下，我们需要首先设置本地状态，以便在状态更新时，将重新呈现组件。

只需使用以下内容更新代码

state

我已经更新了snippet

Answer 2

在RenderList组件中，您需要将状态设置为正在传递的道具

const RenderList = props => {
  // console.log(props.listofapi);
  const classes = useStyles();


  const [array, setArray] = React.useState(props.listofapi); // to update the component

  const deleteHandler = index=> {
    console.log(id);
    setArray(array.filter((item, i) => i!== index));
  };

  return (
    <TableContainer
      component={Paper}
      className={classes.table}
      style={{ align: "center" }}
    >
      <Table
        stickyHeader
        className={classes.container}
        size="small"
        aria-label="a dense table"
      >
        <TableHead>
          <TableRow>
            <TableCell>User ID</TableCell>
            <TableCell>Name</TableCell>
            <TableCell>Use Name</TableCell>
            <TableCell>Email ID</TableCell>
            <TableCell>Edit </TableCell>
            <TableCell>Delete</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {array.map((row, index) => (
            <TableRow key={index}>
              <TableCell component="th" scope="row">
                {row.id}
              </TableCell>
              <TableCell>{row.name}</TableCell>
              <TableCell>{row.username}</TableCell>
              <TableCell>{row.email}</TableCell>
              <TableCell>
                <Button variant="contained" size="small" color="primary">
                  Edit Me
                </Button>
              </TableCell>
              <TableCell>
                <Button
                  variant="contained"
                  size="small"
                  color="primary"
                  onClick={() => deleteHandler(index)}
                >
                  Delete Me
                </Button>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
};
export default RenderList;

Answer 3

您刚才滥用的问题幸免了。试试这个：

  const deleteHandler = id => {
    // do your logic on the array that coming from props
    let temp = props.listofapi.splice(id, 1);
    // using spread
    setArray([...array, temp]);
  };

在codeSandbox上查看您的代码

编辑：请注意，您正在直接在props.listofapi数组上进行编辑/删除和映射，因此.splice()方法将更改/删除其现有元素。如果您不希望这样做，则应尝试 @Junius L。解决方案。

Answer 4

您正在从props.listofapi渲染数据，但是正在更新数组，但由于更改了错误的数组，因此更改不会得到更新。 .splice()从数组中删除项目/从数组中添加项目，您不必setArray(...array, temp);，但setArray(tempArray);

使用useEffect将初始数据保存到数组。

const deleteHandler = id => {
  console.log(id);
  const tempArray = [...array];
  // removes item from tempArray
  tempArray.splice(id, 1); 
  setArray(tempArray);
  console.log("temp array", tempArray);
};

React.useEffect(() => {
  // data from props to array here
  setArray(props.listofapi);
}, [props.listofapi]);

并映射数组而不是props.listofapi

<TableBody>
      {array.map((row, index) => (
      ...

Example

从数组中删除项目而不渲染ReactJS挂钩

4 个答案: