#javascript #reactjs
#javascript #reactjs
Вопрос:
Я создаю программу с React Js, где мне нужно что-то написать в подсказках, и это должно появиться в окне. Теперь я создал функцию добавления подсказок и вставки ее в window, но она выдает ошибку. пожалуйста, помогите мне, если можете 🙂
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>
</>
)
}
}
Комментарии:
1. отсутствует код: p
2. Пожалуйста, скопируйте и вставьте код в свой пост, а также сообщение об ошибке
3. Я пропустил ссылку
4. i.stack.imgur.com/mzlfD.png
5. Отредактируйте свой вопрос, чтобы включить текст вашего кода. Пожалуйста, не используйте изображения кода: если мы хотим запустить ваш код, чтобы помочь выяснить, в чем проблема, мы не можем скопировать и вставить код из изображения.
Ответ №1:
вы не определили какое-либо состояние в классе clock2, поэтому строка # 798 выдает ошибку для не удается прочитать свойство элементов, поскольку оно не определено в классе
class Clock2 extends React.Components {
state = {
items : //
}
}
и вторая ошибка заключается в том, что вы пытаетесь вернуть в функции возврата, что неверно, если вы хотите отобразить элементы, вы должны определить функцию отображения в рендеринге
{
const items = this.state.items.map((e,i ) => {
//
}
return (
<items/>
)
Комментарии:
1. братан, можешь дать свою телеграмму, я напишу тебе там, и мы исправим мою ошибку
2. а как насчет instagram?
3. [ссылка] ( github.com/Hamzaaasif/Reimbursment-Requests/blob/master /… ) проверьте этот код, вы можете найти функцию map, в которой я добавил кнопку для каждой строки в таблице
4. itz_hamzaa это мой идентификатор instagram
5. мой 1___kirakosyan___0 Я напишу вам сейчас
Ответ №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>
</>
)
}
}
Комментарии:
1. это означает, что нам не нужен компонент Clock2, да?
2. Ну, вы можете выбрать два, использовать один компонент или правильно передавать данные / fct второму. Если вы хотите узнать больше, следуйте некоторым руководствам, это отличный способ научиться, прежде чем создавать что-то самостоятельно.
3. Пожалуйста, примите редактирование сообщения, я добавил код. Тогда я удалю ее из своего
4. Извините, но я вас не понимаю
5. У вас есть telegram, я напишу вам оттуда, и мы исправим мою ошибку : /