在反應中更改陣列狀態后組件未重新渲染

洗掉狀態中的元素后組件不會重新渲染，但狀態確實發生了變化。在組件中，可以通過form在陣列中添加一個元素（即狀態），查看陣列中的所有元素，并通過按鈕將其從狀態中洗掉。因此，在洗掉處于狀態的元素后，組件不會重新渲染。以下是組件的代碼：

import React, { useEffect, useState } from 'react';
import {
  Typography,
  IconButton,
  Button,
  TextField,
  Paper,
} from '@mui/material';
import {
  CancelOutlined,
  AddBoxOutlined,
  VisibilityOutlined,
  VisibilityOffOutlined,
} from '@mui/icons-material';

export default function Test1() {
  const [subNames, setSubNames] = useState([]);
  const [subName, setSubName] = useState('');
  const [showSubForm, setShowSubForm] = useState(false);

  const onSubNameChange = (e) => {
    setSubName(e.target.value);
  };

  const onSubNameSubmit = () => {
    if (!subName) return alert('Enter name!');

    setSubNames((prev) => prev.concat({ name: subName }));
    setShowSubForm(false);
    setSubName('');
  };

  const subForm = (
    <>
      <div
        sx={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}>
        <TextField
          label='Sub Todo Name'
          onChange={onSubNameChange}
          name='subTodoName'
          value={subName}
          size='small'
          variant='outlined'
          fullWidth
        />
        <IconButton onClick={onSubNameSubmit}>
          <AddBoxOutlined color='primary' />
        </IconButton>
      </div>
      <br />
    </>
  );

  const onDelete = (position, e) => {
    let arr = subNames;

    arr.splice(position, 1);

    setSubNames(arr);
  };

  return (
    <div>
      <h1>Hello World!</h1>
      {subNames.map((item, key) => (
        <Paper
          key={key}
          sx={{
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
            margin: 'auto',
            padding: 10,
            marginTop: 10,
            borderRadius: '10px',
          }}
          elevation={3}>
          <div sx={{ display: 'flex', alignItems: 'center' }}>
            <Typography variant='body1'>
              <b>Sub Todo-{key   1}:</b>
            </Typography>
            &nbsp;
            <Typography variant='body1'>{item?.name}</Typography>
          </div>
          <IconButton onClick={(e) => onDelete(key, e)}>
            <CancelOutlined color='primary' />
          </IconButton>
        </Paper>
      ))}
      <br />
      {showSubForm && subForm}
      <div>
        {showSubForm && (
          <Button
            variant='contained'
            sx={{ float: 'right' }}
            color='primary'
            size='small'
            startIcon={<VisibilityOffOutlined />}
            onClick={() => setShowSubForm(false)}>
            Add sub todo item
          </Button>
        )}
        {!showSubForm && (
          <Button
            variant='contained'
            sx={{ float: 'right' }}
            onClick={() => setShowSubForm(true)}
            color='primary'
            size='small'
            startIcon={<VisibilityOutlined />}>
            Add sub todo item
          </Button>
        )}
      </div>
    </div>
  );
}

uj5u.com熱心網友回復：

React 不會重新渲染，因為它就像什么都沒有改變，那就是每次你給statea一樣的東西setState。String對于像, ... 這樣的原始型別，Boolean很明顯知道我們是否給出了不同的值。另一方面，對于像Array, ... 這樣的參考型別，更改它們的內容不會將它們標記為 React 的不同值。Object它應該是一個不同的參考。

正如您所做的那樣，您將相同的記憶體參考提供給setSubNames.

 let arr = subNames; // will do just a reference copy -> arr==subNames

一個解決方案可能是擴展運算子，它將創建現有陣列的副本，但在新的記憶體參考上，如下所示：

const onDelete = (position, e) => {
  let arr = subNames;
  arr.splice(position, 1);
  setSubNames([...arr]);
};

標籤：javascript 反应 反应状态

上一篇：557.反轉字串中的單詞IIIjavascript（間距問題）

下一篇：你能創建一個Typescript型別，它恰好具有一組屬性中的一個并且可以被該組索引嗎