警告:在我的 React 应用程序中收到非布尔属性的"true"

Question

我需要帮助理解和修复此错误：

index.js:1 Warning: Received `true` for a non-boolean attribute `country-info-list`.
If you want to write it to the DOM, pass a string instead: country-info-list="true" or country-info-list={value.toString()}.
in ul (at CountryInfo.js:38)
in div (at CountryInfo.js:13)
in ul (at CountryInfo.js:11)
in div (at CountryInfo.js:9)
in CountryInfo (at Infopage.js:42)
in div (at Infopage.js:35)
in Infopage (at App.js:24)
in Route (at App.js:23)
in Switch (at App.js:19)
in main (at App.js:18)
in div (at App.js:16)
in Router (created by BrowserRouter)
in BrowserRouter (at App.js:15)
in LoadingContextProvider (at App.js:14)
in App (at src/index.js:10)
in ThemeContextProvider (at src/index.js:9)

这是我认为导致问题的代码，因为当我注释掉代码时，错误消失了：

<ul country-info-list>
<li className='info-list-item'>
<span className='sub-title'>Currencies: </span>
{currencies.map((currency) => {
return <span key={uuid()}>{currency.name}</span>;
})}
</li>
</ul>

Answer 1

正如错误消息所提到的，"如果要将其写入 DOM，请传递一个字符串：country-info-list="true">

该属性在 html/jsx 中不是标准的，因此 React 不知道如何处理它并给你一个警告。试试这个：

<ul country-info-list="true">
<li className='info-list-item'>
<span className='sub-title'>Currencies: </span>
{currencies.map((currency) => {
return <span key={uuid()}>{currency.name}</span>;
})}
</li>
</ul>

Answer 2

将布尔值作为字符串显式传递给组件。

<ul country-info-list='true'>
<li className='info-list-item'>
<span className='sub-title'>Currencies: </span>
{currencies.map((currency) => {
return <span key={uuid()}>{currency.name}</span>;
})}
</li>
</ul>