如果新值在相同的行和标题下，React中的动态表不会重新呈现

Question

这是从我的函数组件返回的表

<table class="table"> {/* Consonant Table */}
                    <tr>
                        <th colSpan="2">---</th>
                        {headersPOA.map( e => //headers for POA
                            <th colSpan="2">{e}</th>)}
                    </tr>

                    {headersMOA.map(c => //headers for MOA
                    <tr>
                        <th colSpan="2">{c}</th>
                        {addRowSpaces(getRowContent(c)).map(d => //row content with spaces
                            <td align= "center" width= "60px" height= "40px">
                                <button>{d.symbol}</button>
                            </td> 
                            )}
                    </tr>)}
                </table>

以下是我用来填充它的函数：

    const [headersPOA, setHeadersPOA] = useState([]);
    const [headersMOA, setHeadersMOA] = useState([]);

    function getRowContent(moaToTest){// get consonant table row contents
        let row = Object.values(phonemes)
            .filter(phoneme => phoneme.moa === moaToTest)
        return row;
    }

    function addRowSpaces(rowPhonemes) {// add spacing to consonant table rows
        let result = []

        headersPOA.forEach(element => { //check what phoneme to put in each column
            var foundUnvoiced = false; //no unvoiced phonemes fit in this column yet
            var foundVoiced = false; //no voiced phonemes fit in this column yet
            var phonemesInColumn = [] //both voiced and unvoiced phonemes in that column
            for(var i = 0; i < rowPhonemes.length; i++) { //check if any of the phoneme in that row matches the column
                if(rowPhonemes[i].poa === element) { //the phoneme has that poa
                    phonemesInColumn.push(rowPhonemes[i])
                    rowPhonemes.splice(i, 1)
                }
            }
            for(var i = 0; i < phonemesInColumn.length; i++){//check if unvoiced of unvoiced
                if(phonemesInColumn[i].sol === "Unvoiced"){
                    result.push(phonemesInColumn[i])
                    phonemesInColumn.splice(i, 1)
                    foundUnvoiced = true
                }
            }
            if(foundUnvoiced === false){
                result.push("")
            }

            for(var i = 0; i < phonemesInColumn.length; i++){//check if voiced of unvoiced
                if(phonemesInColumn[i].sol === "Voiced"){
                    result.push(phonemesInColumn[i])
                    phonemesInColumn.splice(i, 1)
                    foundVoiced = true
                }
            }
            if(foundVoiced === false){
                result.push("")
            }
        });
        return result;
    }

    function getConsonantHeadersPOA() {//get unique POA
        let uniquePOA = [...new Set(Object.values(phonemes)
            .filter(phoneme => phoneme.type === "C")
            .map(phoneme => (phoneme.poa)))];

        return uniquePOA;
    }

    function getConsonantHeadersMOA() {//get unique MOA
        let uniqueMOA = [...new Set(Object.values(phonemes)
            .filter(phoneme => phoneme.type === "C")
            .map(phoneme => (phoneme.moa)))];

        return uniqueMOA;
    }

这是我的桌子的照片。当我提交一个新值时，它被正确地添加了，但是如果新的音素与另一个音素在相同的标题下并且在相同的行中，则表不会更新。如果我添加一个浊音(在右边)，腭部，塞音，它会被添加到表中，但不会被添加到表中，因为它的C在相同的位置，但不是浊音(在左边)。有人知道为什么会这样吗？我的表格：https://i.stack.imgur.com/0hi8I.png

Answer 1

我找到问题了。我有这一行rowPhonemes.splice(i，1)，这是我在以前的版本中需要的，但在我做了更改之后，它删除了它读取的第二个项目，它共享相同的位置和方式。