Неверное значение отображается при вызове родительской функции из дочернего Reactjs
Я пытаюсь вызвать родительскую функцию из дочернего компонента с динамическим значением, но значение всегда показывает 80. Вот код:
Родитель:
filterdata = (child) =>{
alert(child) // this is always showing 80
this.setState({
max:child
})
}
Внутри render():(characters данные получены из axios)
<Pagination pages = {Math.ceil(this.state.characters.length/10)} filter = {this.filterdata} />
Внутри Pagination.js
import React, { Component } from 'react'
class Pagination extends Component {
render() {
var indents = [];
for (var i = 0; i < this.props.pages; i++) {
indents.push( <li key = {i} className = "page-item"><a class = "page-link" onClick = {() => this.props.filter((i+1)*10)}>{i+1}</a></li>);
}
return (
<div>
<ul class = "pagination justify-content-center">
{indents}
</ul>
</div>
)
}
}
export default Pagination
@MarcCharpentier, как это сделать, потому что вчера я начал учиться реагировать
Но я получаю правильную нумерацию страниц от 1 до 7
Ответы 2
Как сказал Марк, я не думаю, что вам следует делать цикл внутри рендера.
import React, { Component } from 'react'
class Pagination extends Component {
constructor(props) {
super(props);
this.state = { indents: [] };
}
componentDidMount() {
vat indents = [];
for (var i = 0; i < this.props.pages; i++) {
indents.push(<li key = {i} className = "page-item"><a class = "page-link" onClick = {() => this.props.filter((i+1)*10)}>{i+1}</a></li>);
}
this.setState({ indents: indents });
}
render() {
return (
<div>
<ul className = "pagination justify-content-center">
{indents}
</ul>
</div>
)
}
}
export default Pagination
Кроме того, вы используете class вместо className для элемента ul.
Ваш второй пример не будет работать. Страницы — это число, а не массив.
Сначала отображается неожиданный токен, ожидался конструктор
@DavidFrederick хорошая мысль. Я полностью пропустил это. Я удалю это.
@aryanagarwal исправил это. С моей стороны это была плохая работа по копированию/вставке. Код должен был быть внутри функции рендеринга, а я случайно вставил его раньше.
Like Marc said, I don't think you should do the loop inside render, но вы все еще пишете цикл внутри рендера, и ваш код такой же, как у меня
@aryanagarwal Я отвечаю более чем на один вопрос одновременно, разговариваю и теряю то, что делал. Да, я исправил это. Надеюсь, в этот раз я ничего не пропустил.
@DillanWilding Спасибо за твои усилия, чувак.
Я бы изменил ваш компонент, чтобы он выглядел так для краткости. Однако, как говорили другие, вы можете передать логику генерации li методу в вашем классе позже, если класс станет больше. Однако это не то, что вызывает вашу проблему.
Я не уверен, что вызывает константу 80, но этот код работает для меня.
в App.js
import Pagination from 'wherever it comes from';
import React from 'react';
class App extends Component {
state = { max: null }
render() {
return (
<div className = "App">
<Pagination pages = {5} filter = {(val) => {
console.info(val);
this.setState({ max:val });
}} />
</div>
)
}
}
Пагинация.js
import React, { Component } from 'react';
class Pagination extends Component {
render() {
return (
<div>
<ul className = "pagination justify-content-center">
{Array(this.props.pages)
.fill()
.map((el, index) => {
const valueForFilter = (index + 1) * 10;
return (
<li key = {index} className = "page-item">
<a class = "page-link" href = "#" onClick = {() => this.props.filter(valueForFilter)}>
{index + 1}
</a>
</li>
);
})}
</ul>
</div>
);
}
}
export default Pagination;
Большое спасибо, чувак, еще один вопрос, это Array(this.props.pages).fill() создает массив?
@aryanagarwal Да. Array() принимает число, определяющее длину массива, затем fill() принимает все, что вы хотите заполнить, или вы можете оставить его пустым, чтобы заполнить его нулем. Вы не можете сопоставить массив перед использованием .fill(), если вы используете Array() для его создания.
Я думаю, что вы не должны делать цикл в рендере, лучше сделать это в функции, вызываемой при монтировании компонента