setState 不更新状态对象

我正在从全栈反应这本书中学习反应。在其中一个示例投票应用程序中，您有产品和一个按钮来为产品投票。该按钮假设增加该产品的投票数，我将投票数存储在组件父状态中并将其显示在子组件中。该投票功能不起作用。

我创建了父组件，它显示子组件，显示产品描述、ID、颜色和投票（产品收到的投票数）

import React, { Component } from 'react';
import './App.css';
import Product from "./Product";

var products = [
  {
    id: 1,
    name: "one",
    color: "blue",
    votes:0
  },
  {
    id: 2,
    name: "two",
    color: "green",
    votes : 0
  },
  {
    id: 3,
    name: "three",
    color: "Red",
    votes : 1
  }
];

class App extends Component {

  //this function will be passed to child component so the child can pass any data needed back to the parent using function argument.
  handleProductUpVote(productId) {
    console.log("Product #" + " " +productId + " was upvoted")
  };

  render() {
    const productComponents = products.map((product) => {
      return <Product
        key={"product-" + product.id}
        id={product.id}
        name={product.name}
        color={product.color}
        votes={product.votes}
        /*this is how we pass the function from parent to the child as a prop*/
        onVote={this.handleProductUpVote}
      />
    });
    return (
      <div className="App">
        {productComponents}
      </div>
    );
  }
}

export default App;

这是我的子组件，它呈现产品详细信息

import React, { Component } from 'react';

class Product extends Component {
  constructor(props) {
    super(props);
    this.handleUpVote = this.handleUpVote.bind(this);
  }

  //using the function passed from parent in a child. We pass any data needed back to parent component using parent's function arugments 
  // invoke this function using onClick event inside the button 
  handleUpVote() {
    this.props.onVote(this.props.id);
  };

  render() {
    return (
      <div>
        <p> name: {this.props.name} </p>
        <p> MYcolor: {this.props.color} </p>
        {/*invoke the function using onClick so it will invoke handleUpVote that will update the prop and pass the data back to parent*/}
        <button onClick={this.handleUpVote}> Upvote Me </button>
        <p>{this.props.votes}</p>
        <hr></hr>
      </div>
    )
  }
};

export default Product;

这是有效的，当我点击“Upvoteme”按钮时，我将消息记录到控制台

但是当我尝试将设置移动到使用状态时。它不起作用这里是带有状态和 setState 的父组件。当我点击投票按钮时，投票计数没有任何变化。

import React, { Component } from 'react';
import './App.css';
import Child from "./Child";

var productseed = [
  {
    id: 1,
    name: "one",
    color: "blue",
    votes: 0
  },
  {
    id: 2,
    name: "two",
    color: "green",
    votes : 0
  },
  {
    id: 3,
    name: "three",
    color: "Red",
    votes : 1
  }
];

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

    this.state = {
        products: [],
    };

    this.handleProductUpVote = this.handleProductUpVote.bind(this);
  }

  componentDidMount() {
    this.setState ({ products: productseed });
  }

  //this function will be passed to child component so the child can pass any data needed back to the parent using function argument.
  handleProductUpVote(productId) {
    // updating the vote in state
    const nextProducts = this.state.products.map((product) => {
      if (product.id === productId) {
        return Object.assign({}, product, {
          votes: product.votes + 1,
        });
      } else {
        return product
      }
    });

    this.setState({
      products: nextProducts,
    });
  }

  render() {
    const productComponents = productseed.map((product) => {
      return <Child
        key={"product-" + product.id}
        id={product.id}
        name={product.name}
        color={product.color}
        votes={product.votes}
        /*this is how we pass the function from parent to the child as a prop*/
        onVote={this.handleProductUpVote}
      />
    });

    return (
      <div className="App">
        parent
        {productComponents}
      </div>
    );
  }
}

export default Parent;

下面的行假设指向 state 中的产品，但是当我突出显示它时，它不会突出显示 this.state 中的产品。

控制台日志正在将消息记录到我的开发人员控制台。这就是问题所在， this.setState 中的产品没有指向 this.state.products，因此不会更新状态。

componentDidMount() {
  this.setState({ products: productseed });
  console.log("this products not pointing to the this.state.products, why?")
}   

我阅读了与 setState 不工作相关的 stackoverflow 上的每个问题，但我遇到了同样的问题。如果您是一位有反应的专家并且能够看看这个并找出问题所在，我将不胜感激。我无法弄清楚我何时分配了 this.setState({products: productseed}) 并且它没有更新状态。我花了将近 4 个小时的时间阅读和研究，请帮忙。