javascript - react 状态保持旧状态

Question

我在 React 中遇到了一些似乎保持上次或旧状态的问题。我有一个名为 MyLists.js 的父组件，它包含一个循环函数，我在其中呈现了一个名为 Item.js 的子组件

{
     this.state.listProducts.map(d =>
     <Item data={d} /> 
)}

在我的 Item.js 组件中，我在构造函数中设置状态:

this.state = { showFullDescription: false }

变量“showFullDescription”允许我查看产品的完整描述。现在我有 2 个产品，所有状态“showFullDescription”都设置为 false，所以:

• 产品 1 => (showFullDescription = false)
• 产品 2 => (showFullDescription = false)接下来，我通过单击按钮显示产品 2 的完整描述，并将状态设置为 true，因此 Product 2 => (showFullDescription = true)

问题是当我添加另一个产品时，我们称它为“产品 3”，直接显示“产品 3”的完整描述，而“产品 2”的完整描述被隐藏。似乎最后的状态反射(reflect)在“产品 3”上。我真的很抱歉我的英语，它不是我的母语

这里是完整的源代码:MyLists.js

import React, { Component } from 'react';
import ProductService from '../../../../services/ProductService';
import Item from './Item';


class MyLists extends Component {
    constructor(props) {
        super(props);  
        this.state = {
            products: []
        } 

        this.productService = new ProductService();  
        this.productService.getAllProducts().then((res) => {
            this.setState({
                products: res
            })
        }); 
    }

    addProduct(data){
        this.productService.addProduct(data).then((res) => {
            var arr = this.state.products;
            arr.push(res);
            this.setState({
                products: arr
            })
        })
    }

    render() {
        return (
            <div>
                {
                    this.state.products.map(d =>
                    <Item data={d} /> 
                )}
            </div>
        )
    }
}

export default MyLists;

Item.js

import React, { Component } from 'react';
import Truncate from 'react-truncate';


class Item extends Component {
    constructor(props) {
        super(props);  
        this.state = {
            showFullDescription: false
        } 
    }

    render() {
        return (
            <div>
                <h2>{this.props.data.title}</h2>
                {
                    !this.state.showFullDescription &&
                    <Truncate lines={10} ellipsis={<a className="btn btn-primary read-more-btn" onClick={() => this.setState({showFullDescription: true})}>Show More</a>}>
                        {this.props.data.description}
                    </Truncate> 
                )}
                {
                    this.state.showFullDescription &&
                    <span>
                        {this.props.data.description}
                    </span>
                }
            </div>
        )
    }
}

export default Item;

Answer 1

您有一些语法问题并且缺少 && for !this.state.showFullDescription。我稍微更改了组件并使用三元运算符有条件地呈现。现在有点难看，逻辑可以写在渲染之外。另外，如果你不使用，我建议你使用 linter。

MyLists.js

class MyLists extends React.Component {
    state = {
      products: [
        { id: 1, description: "Foooooooooooooooooooooooooooooooooooooooooo", title: "first" },
        { id: 2, description: "Baaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaarrrrrrrrrrr", title: "second" },
        { id: 3, description: "Baaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaz", title: "third" },
      ]
    }


  render() {
    return (
      <div>
        {
          this.state.products.map(d =>
            <Item data={d} />
          )}
      </div>
    )
  }
}

Item.js

class Item extends React.Component {
    state = {
      showFullDescription: false,
    }

  render() {
    return (
      <div>
        <h2>{this.props.data.title}</h2>
        { !this.state.showFullDescription
        ?
        <Truncate lines={3} ellipsis={<span>... <button onClick={() => this.setState({showFullDescription: true})}>Read More</button></span>}>
          {this.props.data.description}
        </Truncate>
        :
          <span>
            {this.props.data.description}
          </span>
        }
      </div>
    )
  }
}

这里是工作沙箱:https://codesandbox.io/s/x24r7k3r9p