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 =否）
产品2 =>（showFullDescription =否）接下来，我通过单击按钮显示产品2的完整说明，并将状态设置为true，因此产品2 =>（showFullDescription = true）

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

您应该在“项目”中拥有一个“键”属性（具有唯一值）-控制台中是否对此没有警告？

反应状态保持旧状态

3 个答案: