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

Question

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

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

我正在使用基于条件的条件，该条件是从几个级别传递来的，用于设置类别，仅显示我想要的对象。 该部分似乎正在工作。 因此，我删除了扩展状态，因为这里没有必要解决此问题。

 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）返回。 粘贴的版本是唯一不会对未定义的值/对象引发错误，但仍然没有更改的版本。 如果我可以从单击的按钮中获得基于item.id进行更改的projectId，我想我可以找出条件并从那里获取它。

Answer 1

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

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

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

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

而且， setState()是异步的，因此您无法执行操作，而console.log在下一行记录您的状态并期望它已更改。 将状态记录在渲染函数的顶部，以查看其何时更改（状态/属性更改后，将调用render）。 另一个选择是使用setState的可选第二个参数，它是使用新状态执行的回调：

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