Question

我正在尝试将图片添加到用户单击按钮的图表中，图像将转到第一个单元格，再次按下它们，第二个图像进入第二个单元格，依此类推。我试图做这样的事情：

<tr className = "tableRow">
                <td><img src = {this.state.Array[0].image}  alt = "" /></td>
                <td><img src = {this.state.Array[1].image} alt = ""/></td>
                <td><img src = {this.state.Array[2].image} alt = ""/></td>
              </tr>

然后点击按钮只需将新图像推送到状态数组。当然我没有意识到，在图像被推送到数组之前，Array [x]将是未定义的，渲染将失败。

我想我可以在数组中放入空字符串，然后用图像替换它们，但我觉得有一种更好的方法可以解决这个问题。

感谢任何建议

Answer 1

为什么不迭代当前存储在该状态中的所有图像，以便仅渲染阵列中的图像，并且在添加或删除它们时，将更新图像的数量。 / p>

不要忘记为每个元素添加唯一键。你可能有更好的方法，但是现在我根据数组索引创建了键（不理想）。

return (
    <tr className="tableRow">
        {this.state.Array.map((image, index) => (
            <td key={`td-${index}`}>
                <img key={`img=${index}`} src={image.image} alt="" />
            </td>
        ))}
    </tr>
)

Answer 2

如果数组长度足够大，则可以使用条件仅显示img元素

<td>
  { this.state.Array.length > 0 ? <img src={this.state.Array[0]} alt="" />
    : null }
</td>

如何在按钮单击时连续向ReactJS中的表添加图片

2 个答案: