我想用react js创建一些程序，关于在窗口中添加字符串，但我遇到了一个错误

Question

我正在用React Js创建一个程序，在那里我需要在提示中写一些东西，它需要出现在窗口中。现在我已经创建了添加提示并将其粘贴到窗口中的功能，但它给出了一个错误。如果可以的话，请帮我：(

export default class Clock extends React.Component {
state = {items: ['Hakob', 'Arman']};
Add(){
const newitems = this.state.items.concat([prompt('a')])
this.setState({items:newitems})
}

render(){
return <div>
<Clock2/> 
</div>
}
} 
class Clock2 extends React.Component {

render(){
return(
<>
<button onClick={this.Add}>click</button>



<div> {this.state.items.map((e, i) => {
return <div key = {e + i}> {e} </div>
} )} </div>
</>
)
}
}

Answer 1

您没有在类clock2中定义任何状态，因此，第798行给您的错误是无法读取项的属性，因为它没有在类中定义

class Clock2 extends React.Components {
state = {
items : // 
}
}

第二个错误是你试图在返回函数中返回，但如果你想映射项目，你必须在渲染中定义映射函数

{
const items = this.state.items.map((e,i ) => {
// 
}
return (
<items/>
)

Answer 2

所以让我们在这里编写代码。

export default class Clock extends React.Component {
state = { items: ['Hakob', 'Aram']};
Add() {
const newItems = this.state.items.concat([prompt('a')])
this.setState({items:newItems})
}
render() {
return <div><Clock2/><div>
}
}
class Clock2 extends React.Component {
render() {
return (
<>
<button onClick={this.Add}>Click</button>
<div>{ this.state.items.map( (e,i) => {
return <div key={ e + i}>{e}</div>
})}
</div>
</>
)
}
}

您犯了一个错误，状态是组件的内部，也是方法的内部。

这应该工作

export default class Clock extends React.Component {
state = { items: ['Hakob', 'Aram']};
Add() {
const newItems = this.state.items.concat([prompt('a')])
this.setState({items:newItems})
}
render() {
return (
<>
<button onClick={this.Add}>Click</button>
<div>{ this.state.items.map( (e,i) => {
return <div key={ e + i}>{e}</div>
})}
</div>
</>
)
}
}

或者，您可以将顶级组件的值传递给他的孩子。

export default class Clock extends React.Component {
state = { items: ['Hakob', 'Aram']};
Add() {
const newItems = this.state.items.concat([prompt('a')])
this.setState({items:newItems})
}
render() {
return (<div><Clock2 add={this.Add} values={this.state.items}/><div>)
}
}
class Clock2 extends React.Component {
render() {
return (
<>
<button onClick={this.prop.add}>Click</button>
<div>{ this.props.values.map( (e,i) => {
return <div key={ e + i}>{e}</div>
})}
</div>
</>
)
}
}