Question

我有一些记录包含一些数据和一个按钮。当我点击按钮时，它设置为真。现在的问题是它对所有记录都喜欢为true。如何更改它以使其仅显示您单击的记录？

class Vacancies extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: newsData,
            liked: false
        }
    }

    addLike = () => {
        this.setState({
            liked: true
        })
    }

    render(){
        return(
            this.state.data.map ((vacancy, i) => {
                return (
                    <div style={{backgroundColor: "grey", margin: 10, padding: 20, width: "40%", float: "left"}} key={i}>
                        <h2>{vacancy.company.name}</h2>
                        <p>{vacancy.company.catchPhrase}</p>
                        <p>Address:</p>
                        <p>Street: {vacancy.address.street}</p>
                        <p>Suite: {vacancy.address.suite}</p>
                        <p>City: {vacancy.address.city}</p>
                        <p>Zipcode: {vacancy.address.zipcode}</p>
                        <button onClick={this.addLike()}>like</button>
                        {
                            this.state.liked ? "This is liked" : "This is not liked"
                        }
                    </div>
                )
            })
        )
    }
}

Answer 1

您需要做什么，为您在Array.map（）func中渲染的数据创建子组件。在该组件中，循环中迭代的每个项目将具有不同的状态，以便跟踪它的喜欢/不喜欢的事件。就像这个

class ABC extends Component {
   render () {
     return (
      <div>
         {arrayOfValues.map((data, i) => <ChildComponent key={i} data={data}/>)}
      </div>
     );
   }
}

然后在您的子组件中

class Child Component extends Component {

   constructor () {
      super()
      this.state = { 
         liked: false, 
      };
   }
   addLike = () => {
    this.setState({ liked: true });
   }
   render () {
     const { vacancy } = this.props.data;
     const { liked } = this.state;
     return (
      <div>
         <h2>{vacancy.company.name}</h2>
         <p>{vacancy.company.catchPhrase}</p>
         <p>Address:</p>
         <p>Street: {vacancy.address.street}</p>
         <p>Suite: {vacancy.address.suite}</p>
         <p>City: {vacancy.address.city}</p>
         <p>Zipcode: {vacancy.address.zipcode}</p>
         <button onClick={this.addLike()}>like</button>
         <p>{liked ? "This is liked" : "This is not liked"}</p>
      </div>
     );
   }
}

Answer 2

更改您的状态以存储以下内容：

{data : [ {id: '1', liked: true, news: 'news'}, ... ] }

现在您可以了解何时以及喜欢哪个项目。另外，将地图中的id传递给button可能有帮助，但不建议使用。

Answer 3

不是在状态中放置true / false，而是可以放置一组用户喜欢的索引。

OnClick=this.addLike(i)

  - addLike = (i) =>this.setState({liked:this.state.liked.push(i)})

Answer 4

将空缺项目渲染为独立组件，并将数据作为道具传递给它。

import React from 'react';
import VacancyItem from './VacancyItem';

export default class Vacancies extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [
        {
          "company" : {
          "name" : "Zoho",
          "catchPhrase" : "Lorem Ipsum",
        },
          "address" : {
          "street" : "#1, Bucket Street",
          "suite" : "Lorem Ipsum",
          "city" : "Chennai",
          "zipcode": "600118"
        }
      },
      {
        "company": {
          "name": "Freshdesk",
          "catchPhrase": "Lorem Ipsum",
      },
          "address": {
          "street": "#2, Golden Street",
          "suite": "RMZ Millenia",
          "city": "Chennai",
          "zipcode": "600097"
        }
      }
    ],
    liked: false
  }
}

render() {
  return (
    this.state.data.map((vacancy, index) => {
      return (
        <VacancyItem data={vacancy} key={index}/>
      )
    })
  )}
}

我在演示here中创建了VacancyItem组件，请检查。

Answer 5

请尝试以下代码：

    class Vacancies extends Component {
    constructor(props) {
    super(props);
    this.storeLike = {}; <<--------------------- Add this
    this.state = {
        data: newsData,
        liked: false
      }
   }

addLike = (id) => { <------- chage this function as below
  this.storeLike[id] = true 

}

render(){
    return(
        this.state.data.map ((vacancy, i) => {
            return (
                <div style={{backgroundColor: "grey", margin: 10, padding: 20, width: "40%", float: "left"}} key={i}>
                    <h2>{vacancy.company.name}</h2>
                    <p>{vacancy.company.catchPhrase}</p>
                    <p>Address:</p>
                    <p>Street: {vacancy.address.street}</p>
                    <p>Suite: {vacancy.address.suite}</p>
                    <p>City: {vacancy.address.city}</p>
                    <p>Zipcode: {vacancy.address.zipcode}</p>
   pass id ---->     <button onClick={this.addLike(i)}>like</button> 
                    {
                        this.state.liked ? "This is liked" : "This is not liked"
                    }
                </div>
            )
        })
    )
}

更新react js中的一条记录

5 个答案: