反应状态保持旧状态

Question

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

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

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

this.state = { showFullDescription: false }

变量"showFullDescription“允许我查看产品的全部描述。例如，现在我有两个产品，所有状态"showFullDescription“都设置为false，所以：

• 乘积1 => (showFullDescription = false)
• 产品2 => (showFullDescription = false)接下来，单击按钮显示产品2的完整描述，并将状态设置为true所以Product2=> (showFullDescription = true)

问题是，当我添加另一个产品时，让我们将其称为“Product3”，直接显示“Product3”的完整描述，而对于“Product2”则是隐藏的。最后一种状态似乎反映在“产品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

您有一些语法问题，并且缺少了用于&&的!this.state.showFullDescription。我稍微修改了组件，并使用三元操作符有条件地呈现。它现在有点难看，逻辑可以写在渲染之外。此外，我建议你使用链接器，如果你不使用。

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

Answer 2

您应该尝试在第二个组件中映射如下：

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

render() {
   return (
    <div>
     {this.props..data.map(data=>
      <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>
   )
  }
  }

Answer 3

您应该在'Item‘中有一个'key’属性(具有唯一的值)--控制台中没有关于它的警告？