Font Awesome 图标打破了我的 React.js 逻辑

Question

我做了一个简单的组件来演示，在下面查看：

function Component() {

const [state, setState] = useState(false)

return (
    <div>
        <table>
            <tr>
                <td>
                    <i className="fas fa-lg fa-trash-alt"></i>
                    {(state) ? 'one' : 'two'}
                </td>
                <td>{(state) ? 'one' : 'two'}</td>
                <td onClick={() => setState(!state)}>change</td>
            </tr>
        </table>
    </div>
   )
}

第二次 td 通过单击“更改”来更改其内部状态，但第一次不会并且仅停留在“两次”上。

有人知道为什么会这样吗？

Answer 1

你的代码没问题，我在这里做了小原型https://jscomplete.com/playground/s548103

我认为，您的问题与当前代码 sn-p 无关。