React 状态只返回一个元素

Question

I'm trying to modify state and take the new state to render.
When I click and modified(added {isClicked: true} to array), console.log(this.state.listOfQuotes) inside onClicked function returns modified the full array of state(which I want to use)
but after render, console.log(this.state.listOfQuotes) returns only one clicked element and not even modified one...

Any help/hint much appreciated!

Here is my code

import React from "react";

export class Quotes extends React.Component {
  constructor(props) {
    super(props);
    this.state = { listOfQuotes: [] };
    this.vote = this.vote.bind(this);
    this.onClicked = this.onClicked.bind(this);
  }
  componentDidMount() {
    const url = "https://programming-quotes-api.herokuapp.com/quotes";
    fetch(url)
      .then(res => res.json())
      .then(quote => {
        this.setState({
          listOfQuotes: quote
        });
      });
  }
  onClicked(id) {
    const quotes = [...this.state.listOfQuotes];
    const clickedQuote = quotes.findIndex(quote => quote.id === id);
    console.log("onclicked", clickedQuote);
    const newArray = { ...quotes[clickedQuote], isClicked: true };
    console.log(newArray);
    this.setState(prevState => ({
      listOfQuotes: [
        ...prevState.listOfQuotes.splice(clickedQuote, 1, newArray)
      ]
    }));
    console.log(this.state.listOfQuotes);  ----------> this one returns what i want 
  }
  render() {
    console.log(this.state.listOfQuotes); -----------> i want to have same result as above state
    return (
      <div className="quotes">
        <div>
          {this.state.listOfQuotes.map((quote, idx) => (
            <div key={idx}>
              <div onClick={() => this.onClicked(quote.id)}>
                {!quote.isClicked ? (
                  <div className="before-clicked">{quote.en}</div>
                ) : (
                  <div className="after-clicked">{quote.en}</div>
                )}
              </div>
              <div>By {quote.author}</div>
              <div>Rating {quote.rating}</div>
              <div className="vote">
                <span>{quote.numberOfVotes}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    );
  }
}

Answer 1

There is a problem with your onClicked method.

It is not modifying the array correctly.

In my opinion, this is how it could have done.

 onClicked(id) {
    let quotes = [...this.state.listOfQuotes];

    const clickedQuoteIndex = quotes.findIndex(quote => quote.id === id);

    // Modify the object on the found index and assign true to "isClicked"
    quotes[clickedQuoteIndex].isClicked = true;

    // And then setState with the modified array
    // Since setState is async, so the console shouldn't be called immediately 
    // but rather in the callback
    this.setState({ listOfQuotes: quotes }, () => {
        console.log(this.state.listOfQuotes);
    });
}