reactjs数组映射方法答案

【问题标题】：reactjs array map methodreactjs数组映射方法
【发布时间】：2019-02-14 07:01:37
【问题描述】：

我正在尝试在数组映射方法中添加视图更多或视图更少部分，但是当我在映射方法内的按钮上使用 onclick 方法时，所有按钮都在起作用，而不是特定的按钮。

class Projects extends Component{
constructor(props){
super(props);
this.state={
  projects:[
    {
      id:1,
      title:'Calculator',
      description:'A Simple Javascript Calculator application'
    },
    {
      id:2,
      title:'ColorGuess',
      description:'A Javascript application'
    },
    {
      id:3,
      title:'GamesDB',
      description:'A React application',
    },
  ],
  clicked:false
  }
   this.toggle = this.toggle.bind(this)
 }

 toggle(){
  this.setState( state => ({
  clicked:!state.clicked
  }));
 }
render(){
  return(
   <div>
    <h2>My Projects</h2>
    <div className="d-flex flex-wrap justify-content-center">
    {
      this.state.projects.map( (project, i) =>{
        return(
          <div key={i} style={{width:'40%'}}>
            <div className="card">
              {project.title}
              <hr/>
              Description : {project.description} <br/>
              <button onClick={this.toggle}>
              {this.state.clicked ? <i class="fas fa-chevron-down"></i> : <i class="fas fa-chevron-up"></i>}
              </button>
            </div>
          </div>
        );
      })
     }
    </div>
   </div>
  );
 }
}

当我在渲染后单击单个按钮时，但所有其他按钮都在起作用，而不是特定按钮。

我用过箭头函数，也传递了索引，但还是不行，不知道哪里出错了。

【问题讨论】：

好吧，如果按钮有单独的状态，那么让一个元素实际上有自己的状态似乎是合适的，不是吗？您可以轻松创建一个名为 ProjectItem 的组件，您可以将其重构为功能组件并使用项目状态来设置正确的道具，或者使用 projectitem 状态来查看是否切换了某些东西（这取决于切换是否应该表现为单个切换，或全部切换）

标签： reactjs es6-map

【解决方案1】：

存储被点击项目的 id 并使用它来切换按钮的状态，而不是存储被点击的布尔值

class Projects extends React.Component{
  constructor(props){
    super(props);
      this.state={
        projects:[
          {
            id:1,
            title:'Calculator',
            description:'A Simple Javascript Calculator application'
          },
          {
            id:2,
            title:'ColorGuess',
            description:'A Javascript application'
          },
          {
            id:3,
            title:'GamesDB',
            description:'A React application',
          },
        ],
        clicked:false
      }
     this.toggle = this.toggle.bind(this)
   }

   toggle(id){
    this.setState( state => ({
      clicked: id === state.clicked? null: id
    }));
   }
   
   render(){
      return(
       <div>
        <h2>My Projects</h2>
        <div className="d-flex flex-wrap justify-content-center">
        {
          this.state.projects.map( (project, i) =>{
            return(
              <div key={i} style={{width:'40%'}}>
                <div className="card">
                  {project.title}
                  <hr/>
                  Description : {project.description} <br/>
                  <button type="button" onClick={() => this.toggle(project.id)}>
                  {this.state.clicked === project.id ? 'up' : 'down'}
                  </button>
                </div>
              </div>
            );
          })
         }
        </div>
       </div>
      );
    }
}

ReactDOM.render(<Projects />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js"></script>
<div id="root" />

【讨论】：

是的，工作中，我没想到，只是将单击映射到所有元素，谢谢

【解决方案2】：

嗯，所以您为所有组件使用一种状态，每次您设置一个状态时，它都会指向clicked，而this.state.clicked ? 正在使用该状态要解决此问题，您必须为每个按钮维护单独的状态。

要解决这个问题，你需要做这样的事情

class Projects extends Component{
constructor(props){
super(props);
this.state={
  projects:[
    {
      id:1,
      title:'Calculator',
      description:'A Simple Javascript Calculator application'
    },
    {
      id:2,
      title:'ColorGuess',
      description:'A Javascript application'
    },
    {
      id:3,
      title:'GamesDB',
      description:'A React application',
    },
  ],
  clicked:false
  }
   this.toggle = this.toggle.bind(this)
 }

 toggle = (index) => {
   const { projects } = this.state;
   const update = projects.map((item, key) => {
    return index === key ? {
      ...item,
      clicked: !item.clicked
    } : {
      ...item,
    };
  });
  this.setState({
    projects: update
  });
 }
render(){
  const { projects } = this.state;
  const renderButtons = projects.map( (project, i) => {
    return(
      <div key={i} style={{width:'40%'}}>
        <div className="card">
          {project.title}
          <hr/>
          Description : {project.description} <br/>
          <button onClick={(i) => this.toggle(i)}>
          {project.clicked ? <i class="fas fa-chevron-down"></i> : <i class="fas fa-chevron-up"></i>}
          </button>
        </div>
      </div>
    );
  })
  return(
   <div>
    <h2>My Projects</h2>
    <div className="d-flex flex-wrap justify-content-center">
    {renderButtons}
    </div>
   </div>
  );
 }
}

【讨论】：