Question

我想要更新这样的数组：

// JSX in Render
<Table size="sm" responsive striped bordered hover>
                                        <tbody>
                                            <tr key={-1} className="defTabCra">
                                                <th>Date</th>
                                                <th>Morning</th>
                                                <th>Afternoon travaillée</th>
                                            </tr>
                                            {this.generateMonth()}
                                        </tbody>
                                    </Table>

我的函数generateMonth（）：

generateMonth = () => {
    return MyArrayOfMomentJs.map((item,i) => { // Item is a momentJS object
        var jour = item.format("ddd");
        jour = jour.charAt(0).toUpperCase() + jour.slice(1);
        if (item.isoWeekday() > 5 || item.CheckIfholiday()) {
            return (
                <tr key={i} className="NotWorked">
                <th>{jour + ' ' + item.format("D")}</th>
                <td />
                <td />
                </tr>
            );
        }
        else {
            var rowContainer = [];
            //Morning
            if (ArrayOfBooleanForTheMorning[i] !== null) { //null means that no choices has been made
                if (ArrayOfBooleanForTheMorning[i]) {
                    rowContainer.push(
                        <td key={i}>
                            <input type="checkbox" value="true" />
                            <MaterialIcon color="green" icon="check" />
                        </td>
                    );
                }
                else rowContainer.push(
                    <td key={i}>
                        <input type="checkbox" value="false" />
                        <MaterialIcon icon="close" color="red" />
                    </td>
                );
            }
            else rowContainer.push(<td key={i}>
                <input type="checkbox" />
                <MaterialIcon icon="remove" />
            </td>);

            //Afternoon
            if (ArrayOfBooleanForTheAfternoon[i] !== null) {
                if (ArrayOfBooleanForTheAfternoon[i])
                    rowContainer.push(
                        <td key={i + 31}>
                            <input type="checkbox" value="true" />
                            <MaterialIcon color="green" icon="check" />
                        </td>
                    );
                else rowContainer.push (
                    <td key={i + 31}>
                        <input type="checkbox" value="false" />
                        <MaterialIcon icon="close" color="red" />
                    </td>
                );
            }
            else rowContainer.push(<td key={i+31}> // If null
                <input type="checkbox" />
                <MaterialIcon icon="remove" />
            </td>);
            var row = [<tr key={i}><th>{jour + ' ' + item.format("D")}</th>{rowContainer}</tr>];
            return row;
        }
    }, this);
}

目标非常简单：每当我在ArrayOfBooleanForTheAfternoon或ArrayOfBooleanForTheMorning中进行更改时，我都想重新渲染该组件。现在事情变得奇怪了（或者也许不是，你们会告诉我：p）：每当我进行更改时都会调用该函数，这很好。 map函数返回一个JSX数组，其内容也很好。但是，此新数组不会替换已经渲染的实际数组。

我试图将jsx数组置于一种状态，以将我的函数直接放入代码中。什么都没有。

任何人都知道发生了什么事吗？

PS：我正在使用bootstrap-react作为页面样式及其布局。

Answer 1

错误使用关键道具似乎是可能的问题。您在item对象中是否有独特的东西。可以使用它。代替

<td key={i}...>

尝试

<td key = {item.id} ...>

，其中id是item对象中唯一实体的键。与tr标签相同。

地图未重新渲染的结果

1 个答案: