React:状态更新时调用dangerouslySetInnerHTML

Question

我在强制组件在状态更新时调用dangerouslySetInnerHTML时遇到了问题。我的测试表明，状态正在成功更新，并且组件已重新呈现。但是，在我再次刷新页面之前，所有设置为state的新信息都不会显示。

我在网上找到的唯一解决方案是为每个单元格设置唯一的键，但这并不起作用。

日历：

var tableItems = times.map((time) => {
  return <TableItem key={time} time={time}/>;
});

TableItem：

constructor(props) {
    super(props);
    this.state = {
        events: []
    }
}

componentWillReceiveProps(nextProps) {
    if (nextProps.events) {
        this.setState({
            events: nextProps.events
        })
    }
}

assignEvents(weedDay) {
    // Define variables based on this.state.events
    // if statement to check if event matches with time and date of table cell
            return {__html: '<div class="eventHolder">...variables...</div>'};
}

render() {
    return (
        <tr>
            <td dangerouslySetInnerHTML={this.assignEvents(0)}></td>
            <td dangerouslySetInnerHTML={this.assignEvents(1)}></td>
            <td dangerouslySetInnerHTML={this.assignEvents(2)}></td>
            <td dangerouslySetInnerHTML={this.assignEvents(3)}></td>
            <td dangerouslySetInnerHTML={this.assignEvents(4)}></td>
            <td dangerouslySetInnerHTML={this.assignEvents(5)}></td>
            <td dangerouslySetInnerHTML={this.assignEvents(6)}></td>
        </tr>
    );
}

Answer 1

@Matheus Alves我在CodeSandbox上创建了这个示例项目，它似乎正在工作。https://codesandbox.io/s/48zwkxj1n9

这与您的用例相似吗？如果没有，你能重现你在CodeSandbox中看到的bug吗？