试图使用状态变量使字符串大写

Question

我不明白react中的useState是如何工作的。我只是想用.toUpperCase制作一个更新标题的按钮，但它失败了。我不明白>gt；const[Title，setTitle]=useState(Title(<lt；这行应该是。我试着看了看文档，但似乎抓不住。

import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import './index.css';


const Unit = (props) =>{  

return (
<div>
<p>Unit code = {props.unitcode}, Title = {props.title} </p>

</div>
)
}

const App = () => {

const unitcode = ['COMP1010', 'COMP1750'] 
const title = ['Fundamentals of Computer Science','Introduction to Business Information Systems'] 
const  [Title, setTitle] = useState(title)


return (
<div>
<Unit unitcode = {unitcode[0]} title = {title[0]} />
<button onClick={() => setTitle(title.toUpperCase)}>
UP
</button>       
<Unit unitcode = {unitcode[1]} title = {title[1]} />


</div>

)
}

ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
)

Answer 1

除了在toUpperCase()中使用括号并在字符串而不是数组上调用它之外，这可能更接近您想要的：

const App = () => {
const unitcode = ["COMP1010", "COMP1750"];
const titles = [
"Fundamentals of Computer Science",
"Introduction to Business Information Systems"
];
const [titleOne, setTitleOne] = useState(titles[0]);
const [titleTwo, setTitleTwo] = useState(titles[1]);
return (
<div>
<Unit unitcode={unitcode[0]} title={titleOne} />
<button onClick={() => setTitleOne(titleOne.toUpperCase())}>UP</button>
<Unit unitcode={unitcode[1]} title={titleTwo} />
</div>
);
};

Answer 2

不能在数组上调用toUpperCase()。它只适用于string类型。此外，如果您希望调用toUpperCase()，则缺少()。