React 不会在数组状态更新时重新渲染

Question

我正在尝试制作 3 个按钮控件来打开和关闭 3 个相应的菜单列表。 Material-UI 是我目前使用的 UI 框架。代码如下：

const Filters = () => {

    const [anchors, setAnchors] = useState([null, null, null])

    const handleClick = (event, index) => {
        const arr = anchors
        arr[index] = event.target
        setAnchors(arr)    
    }

    const handleClose = (index) => {
        const arr = anchors
        arr[index] = null
        setAnchors(arr)  
    }

    return(
        <div id="top-filters">
            <div className="controls">
                <Button onClick={(event) => handleClick(event, 0)}>Sort By</Button>
                <Button onClick={(event) => handleClick(event, 1)}>Price</Button>
                <Button onClick={(event) => handleClick(event, 2)}>Delivery Fees</Button>
            </div>
        {
            console.log({anchors})
        }
            <Menu key={1}
                anchorEl={anchors[0]} 
                open={Boolean(anchors[0])} 
                onClose={() => handleClose(0)} 
                keepMounted
            >
                <MenuItem>
                    <ListItemText primary="By Rating" />
                </MenuItem>
            </Menu>

            <Menu key={2}
                anchorEl={anchors[1]} 
                open={Boolean(anchors[1])} 
                onClose={() => handleClose(1)} 
                keepMounted            
            >
                <MenuItem>
                    <Slider defaultValue={25} marks={marks} step={25} />
                </MenuItem>
            </Menu>

            <Menu key={3}
                anchorEl={anchors[2]} 
                open={Boolean(anchors[2])} 
                onClose={() => handleClose(2)} 
                keepMounted            
            >
                <MenuItem>
                    <ListItemText primary="By Delivery Fees" />
                </MenuItem>
            </Menu>

            <FormControl className="search-bar-filter">
                <Icon>search</Icon>
                <StyledInput classes={{ root: classes.root }} name="search" type="search" placeholder="Search" disableUnderline />
            </FormControl>
        </div>
    )
}

export default Filters

我检查了控制台中的值更新，它们看起来不错，但我不确定 React 为何不会重新呈现页面（当我单击按钮时，没有任何反应，但锚点状态已更新）。感谢您的帮助。

Answer 1

你正在做的是一个突变：

arr[index] = event.target

更新状态时应避免突变。因为如果你改变你的状态，React 无法理解你的状态已经改变。您可以使用map、filter 之类的方法或任何其他不会改变您的状态的方法。

const handleClick = (event, index) => {
  setAnchors((prev) =>
    prev.map((el, i) => {
      if (i !== index) {
        return el;
      }

      return event.target;
    })
  );
};

或者如果你喜欢简洁的：

const handleClick = (event, index) => {
  setAnchors((prev) => prev.map((el, i) => (i !== index ? el : event.target)));
};

扩展语法可用于非嵌套数组，但如果您正在处理嵌套数组并更改嵌套值，请小心，因为扩展语法会创建浅拷贝。这就是为什么我大部分时间都喜欢使用map 之类的方法。

如果您不想映射整个数组（有些人更喜欢这个）Object.assign 和扩展语法可以一起使用。

const handleClick = (event, index) => {
  setAnchors((prev) => Object.assign([], { ...prev, [index]: event.target }));
};

更新：

正如我之前解释的，扩展语法只会产生浅拷贝。

注意：传播语法在复制一个 大批。因此，它可能不适合复制多维 数组，如下例所示。 （同样适用于 Object.assign() 和传播语法。）

Source

这意味着嵌套值保持与原始值相同的引用。因此，如果您为新数组（或对象）更改某些内容，它也会更改原始数组。

const arr = [
  { id: 0, name: "foo" },
  { id: 1, name: "bar" },
  { id: 2, name: "baz" },
];

const newArr = [...arr];

newArr[0].name = "something else";

console.log("newArr", newArr);
console.log("original arr", arr);

如您所见，我们的原始数组也发生了变化。实际上，这不是嵌套数组，但我们正在更改数组元素的嵌套属性。也许这是嵌套数组的一个更好的例子，但上面的例子更现实。

const arr = [["foo", "bar"], [1,2]];

const newArr = [...arr];

newArr[0][0] = "fizz";

console.log(newArr);
console.log(arr);

Answer 2

您错误地更新了状态。 const arr = anchors 不是克隆锚点的正确方法。您需要使用... 运算符。

    const handleClick = (event, index) => {
        const arr = [... anchors]
        arr[index] = event.target
        setAnchors(arr)    
    }

    const handleClose = (index) => {
        const arr = [... anchors]
        arr[index] = null
        setAnchors(arr)  
    }