Я пытаюсь вызвать родительскую функцию из дочернего компонента с динамическим значением, но значение всегда показывает 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
🤔 А знаете ли вы, что...
React поддерживает серверный рендеринг (SSR) для улучшения SEO и производительности.
Как сказал Марк, я не думаю, что вам следует делать цикл внутри рендера.
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.
Я бы изменил ваш компонент, чтобы он выглядел так для краткости. Однако, как говорили другие, вы можете передать логику генерации 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;