如何从另一个组件更改反应组件的 state

Question

I saw dozens of examples but they are not working in my case, I want to update the page variable in "bookitem" component and rerender it. using gives an error ' Expected an assignment or function call and instead saw an expression no-unused-expressions'

    import React from 'react'
import { Pagination, Container } from 'semantic-ui-react'
import bookitem  from './Book_item'

const PaginationI = () => (
    <Container style={{textAlign: "center", padding:'4rem'}}>
  <Pagination defaultActivePage={5} totalPages={10} onPageChange={PageChange}/>
  </Container>
)

function PageChange(event,data){
    console.log(data.activePage);
    <bookitem page={data.activePage}/>
};
export default PaginationI

//////////////////////////////////////////////////////////////////////////////////////////////////////

 class bookitem extends Component{

    constructor(props){
        super (props);

        this.state={
            counter:0,
            page:0,
            data2:[]

        };
    }

    componentWillMount(){
        console.log(this.props.page)
            axios.get('/books/'+this.state.page).then(res=>{console.log(res.data);this.setState({data2:res.data});})
            console.log('aa')
            console.log(this.state.data2)


    }

    genurl(isbn){
        console.log(isbn)
    let url='http://covers.openlibrary.org/b/isbn/'+ isbn + '-L.jpg'
        return url;
    }

    render(){return(
        <div>
        <div>{this.state.page}</div>
        <Container>
        <div style={{padding:"1em 1em", textAlign: "right"}}>

        <Card.Group itemsPerRow={3} stackable={true} doubling={true}>

        {this.state.data2.map(card=>(
        <Card href="#">
    <Image src={this.genurl(card.isbn)} wrapped ui={false} />
    <Card.Content>
      <Card.Header>{card.title}</Card.Header>
      <Card.Meta>
        <span className='date'>Author:{card.author}</span>
      </Card.Meta>
      <Card.Content >
      <Rating icon='star' defaultRating={card.avgrating} maxRating={5} />
    </Card.Content>
      <Card.Description>
        {card.avgrating} Avg rating, {card.totalratings} total ratings.
      </Card.Description>
    </Card.Content>
    <Card.Content >
      <a>
        <Icon name='pencil alternate' />
        {card.reviews} Reviews
      </a>
    </Card.Content>
  </Card>
  ))}
  
  </Card.Group>
  
        </div>

        </Container>
        </div>
    )
}
}

export default bookitem

Answer 1

First of all Bookitem must starts with capitalized letter. So instead of <bookitem /> you must have <Bookitem/>.

Now if you want to change state of a react component from another component, you have to pass a function from parent to child which will be called when you want to change the state. For example

const Compoent1 = () => { 
  const [state, setState] = useState(value)
  .....
  return <Component2 changeState={setState} />
}

Answer 2

The problem is that you are not rendering the bookitem component at all. You have to manage the state of your activePage , pass it to the bookitem and actually render this component.

import React, { useState } from "react";
import { Pagination, Container } from "semantic-ui-react";
import BookItem from "./Book_item";

const PaginationI = () => {
  const [activePage, setActivePage] = useState(0); // manage the state of activePage

  function PageChange(event, data) {
    setActivePage(data.activePage); // update the state in event handler
  }

  return (
    <Container style={{ textAlign: "center", padding: "4rem" }}>
      <BookItem page={activePage} /> {/* render your component */}
      <Pagination
        defaultActivePage={5}
        totalPages={10}
        onPageChange={PageChange} /> {/* pass event handler */}
    </Container>
  );
};

export default PaginationI;

Also you would have to rename the bookitem component due to collision with HTML tags like this

import React from "react";

class BookItem extends Component {
  constructor(props) {
    super(props);

    this.state = {
      counter: 0,
      page: 0,
      data2: [],
    };
  }

  componentWillMount() {
    console.log(this.props.page);
    axios.get("/books/" + this.state.page).then((res) => {
      console.log(res.data);
      this.setState({ data2: res.data });
    });
    console.log("aa");
    console.log(this.state.data2);
  }

  genurl(isbn) {
    console.log(isbn);
    let url = "http://covers.openlibrary.org/b/isbn/" + isbn + "-L.jpg";
    return url;
  }

  render() {
    return (
      <div>
        <div>{this.state.page}</div>
        <Container>
          <div style={{ padding: "1em 1em", textAlign: "right" }}>
            <Card.Group itemsPerRow={3} stackable={true} doubling={true}>
              {this.state.data2.map((card) => (
                <Card href="#">
                  <Image src={this.genurl(card.isbn)} wrapped ui={false} />
                  <Card.Content>
                    <Card.Header>{card.title}</Card.Header>
                    <Card.Meta>
                      <span className="date">Author:{card.author}</span>
                    </Card.Meta>
                    <Card.Content>
                      <Rating
                        icon="star"
                        defaultRating={card.avgrating}
                        maxRating={5}
                      />
                    </Card.Content>
                    <Card.Description>
                      {card.avgrating} Avg rating, {card.totalratings} total
                      ratings.
                    </Card.Description>
                  </Card.Content>
                  <Card.Content>
                    <a>
                      <Icon name="pencil alternate" />
                      {card.reviews} Reviews
                    </a>
                  </Card.Content>
                </Card>
              ))}
            </Card.Group>
          </div>
        </Container>
      </div>
    );
  }
}

export default BookItem;