javascript - 如何从 React 组件内的映射项中设置状态

Question

我正在尝试更改属于 json 文件中对象映射数组一部分的组件的状态。我只想更改包含单击按钮的项目，而不更改其他项目。

我一直在尝试使用 onClick 设置属性 (projectID)，虽然我可以让它切换一个状态元素(展开或未展开)，但它会对所有返回的结果执行此操作。所以我一直在尝试获取projectId(在数据中设置)并使用它来设置条件。但我似乎无法通过点击更新projectId。我简单地研究了上下文，但我认为我缺少一些更简单的东西。我已经在 onClick (如图所示)和 onViewChange 中尝试过，但这似乎不起作用，因为我无法从映射项目外部访问 item.id。

我使用基于从几个级别传递下来的 Prop 的条件来设置类别，仅显示我想要的对象。这部分似乎正在发挥作用。因此，我删除了扩展状态，因为它对于此处的问题来说不是必需的。

 import React from 'react';
 import projects from '../data/projects.json';

 class ProjectCard extends React.Component {

  constructor(props) {
    super(props);
    this.state={
        projects,
        expanded: false,
        projectId: -1
    }
  }

  onViewChange = (e) => {
    this.setState({
        expanded: !this.state.expanded
    });
    console.log(this.state.projectId)
  };

  render() {
    return (
        <React.Fragment>
        {this.state.projects.map((item) => {
            if (!this.state.expanded && item.category === this.props.category) { 
                return (
                        <div key={item.id} className="project-card">
                            <div className="previewImg" style={{backgroundImage: `url(${item.previewImg}` }} ></div>
                            <div className="copy">
                                <h2>{item.title}</h2>
                                <p>{item.quickDesc}</p>
                            </div>
                            <div className="footer">
                            {item.tools.map((tool) => {
                                return ( 
                                    <div key={tool} className="tools" style={{backgroundImage: `url(${tool}` }}></div>
                                );
                            }
                            )}
                                <button onClick={() => this.onViewChange({projectId: item.id})} className="btn float-right"><i className="fas fa-play"></i></button>
                            </div>
                        </div> 
                        );
                    }
            }

        )}
        </React.Fragment>
    );
  };
};

 export default ProjectCard;

我设置了一个控制台日志来告诉我projectId是否发生变化，并且它总是作为我的默认值(-1)返回。粘贴的版本是唯一不会抛出有关未定义值/对象的错误的版本，但仍然没有任何更改。如果我可以让projectId根据单击的按钮中的item.id进行更改，我想我可以找出条件并从那里获取它。

Answer 1

您实际上并未在点击处理程序中使用新的 projectId 设置状态。第一步只是简单地将项目的 ID 传递给点击处理程序，而不是对象:

onClick={() => this.onViewChange(item.id)}

第二部分是在点击处理程序中实际使用该参数:

onViewChange = (id) => {
    this.setState({
        expanded: !this.state.expanded,
        projectId: id
    });
 };

此外，setState() 是异步的，因此您无法执行您所做的操作并在下一行 console.log 您的状态并期望它已更改。在渲染函数顶部记录状态以查看它何时发生变化(在状态/属性更改后，调用渲染)。或者另一种选择是使用 setState 的可选第二个参数，它是使用新状态执行的回调:

this.setState({id: 5}, () => console.log(this.state.id)) <-- id will be 5