React应用插入复选框时出现Unhandled Rejection及JSX解析错误如何解决

问题根源 #

• 第一个报错是因为你将checked={item.gotIt}属性写在了<input>开标签和</input>闭标签之间，这部分内容会被识别为input元素的子节点，而input属于空元素（void element），不允许包含子元素，也不能使用成对的闭合标签。
• 改成自闭合标签后仍报错，是因为你没有将所有input相关的属性都放到自闭合标签的内部，checked属性仍独立在标签外，导致JSX解析时认为input标签没有正确闭合。

修正方案 #

将input标签改为标准的JSX自闭合写法，所有属性都放在标签内部，不要保留成对的</input>标签，也不要在标签外部写input的属性：

<input type="checkbox" id={item.Name} checked={item.gotIt} />

完整修正后代码 #

return (
  <div>
    <div>
      <table className = "className">
        <tbody>
        <tr>
          <th>Only avaliable Now</th>
        </tr>
            {this.state.time_array.map(item => (
              <tr>
                <td>
                  <li><b> {item.id}</b> 
                      <input type="checkbox" 
                        id={item.Name}
                        checked={item.gotIt}
                      />
                      <ul>
                         <li>Where to find: {item.find}</li>                       
                      </ul>
                  </li>
              </td>
            </tr>
            ))}
          </tbody>
      </table>
    </div>
  </div>      
);

内容的提问来源于stack exchange，提问作者webdesignnoob