NextJS 动态列表在删除/更新时不更新答案

【问题标题】：NextJS Dynamic List Not Updating on Delete/UpdateNextJS 动态列表在删除/更新时不更新
【发布时间】：2021-10-27 21:14:27
【问题描述】：

目前，我的 react/nextjs 动态列表没有正确更新，我给了一个数组来映射，所以它会在帧更新时显示一个新行，因为它存储在 useState 上，通常，问题出在关键不是唯一的列表，但我的密钥是唯一的

这是我的代码

const [allSelectedMaterials, setAllSelectedMaterials] = useState([]) // This variable stores a javascript object into the array
{console.log('-- Updated --')}
{allSelectedMaterials.map((material, i) => {
    const key = Object.keys(material).toString()
    console.log(`${i} - [${key}] ${material}`)

    return (
        <div key={key}>
            <Row className='align-items-center'>
                <Col xs='auto'>
                    <h6>{material[key].name}</h6>
                </Col>
                <Col>
                    <Button variant='danger' className='mb-1' onClick={() => handleDeleteMaterial(key)}>
                        Remove
                    </Button>
                </Col>
            </Row>
            <InputGroup>
                <InputGroup.Text>
                    <Image src={material[key].image} className={`${styles.allMaterialsImage}`} />
                </InputGroup.Text>
                <Form.Control type='number' min={1} ref={(e) => (selectedMaterials.current[i] = e)} required />
            </InputGroup>
            <div className='mt-1' />
        </div>
    )
})}

问题是在我添加列表中的第一项并添加新项后，它不会更新视图，这是控制台输出

这是我在列表中添加第二个条目

它在日志上清楚地表明该数组（存储在 useState 中）已更新，但它并没有改变视图，它仍然与前一个相同。但是，如果我通过更新任何 useState 变量来重新更新框架，它会更新列表

更新：这是我添加新材料的代码 （loadedMaterials 只是从 API 检索的材料列表）

const handleAddSelectedMaterial = () => {
    loadedMaterials.map((material) => {
        const key = Object.keys(material)
        if (key == currentSelectedMaterial) {
            let _material
            if (allSelectedMaterials.length > 0) _material = allSelectedMaterials
            else _material = []

            _material.push({ [material[key].id]: material[key] })
            setAllSelectedMaterials(_material)
        }
    })
}

【问题讨论】：

只添加必要的信息以帮助其他人浏览您的代码并帮助您。现在有很多信息，其他人很难全部看完。
感谢您的意见，我已经重写了问题，以便更容易理解问题
你可以添加这一行 -> useEffect(() => {} , [allSelectedMaterials]) 看看它是否适合你
@Zurez 尝试了它，但仍然无法正常工作，有趣的是它根本没有调用 useEffect，即使它应该调用它，因为依赖项的值发生了变化（allSelectedMaterial）。但是，如果我从更新任何其他 useState 进行更新/重新渲染后，视图仍然会正确更改
您分享的代码块，是实际代码还是伪代码？如果它是一个真实的代码，那么我在这里看到了问题。

标签： javascript reactjs react-hooks next.js

【解决方案1】：

尝试替换来自

 _material.push({ [material[key].id]: material[key] })
            setAllSelectedMaterials(_material)

到

 _material.push({ [material[key].id]: material[key] })
            setAllSelectedMaterials([..._material])

【讨论】：

请在您的回答中提供更多详细信息。正如目前所写的那样，很难理解您的解决方案。

【解决方案2】：

感谢大家的意见和回复，但我已经通过重做表单和动态列表的工作方式设法解决了这个问题，现在它工作得很好。

如果有人想知道，我基本上只是在动态列表中遵循这个人的实现 https://www.cluemediator.com/add-or-remove-input-fields-dynamically-with-reactjs

【讨论】：