切换无状态反应组件数组的可见性

我试图简单地映射从 api 返回的一些数据，并为每个返回的对象创建一个无状态组件。我希望能够单击任何组件来切换其其余数据的可见性。

我尝试了多种方法来做到这一点，但一直碰壁，我还搜索了堆栈溢出，但似乎找不到答案。

我已经通过使它们成为单独的类组件来使其工作，但是对于切换功能来说似乎有很多不必要的代码。

预先感谢您提供的任何帮助或见解，这是我目前所拥有的内容的快速细分。

澄清一下，这是一个简单的应用程序，供我学习如何使用 React 和外部 api，它没有使用 redux。

获取处于类组件状态的用户

class PersonList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      resource: []
    };
  }

  async componentDidMount() {
    let fetchedData = await API_Call("people");
    this.setState({ resource: fetchedData.results });
    while (fetchedData.next) {
      let req = await fetch(fetchedData.next);
      fetchedData = await req.json();
      this.setState({
        resource: [...this.state.resource, ...fetchedData.results]
      });
    }
  }
}

然后映射结果并为每个结果渲染一个组件

render() {
  const mappedPeople = this.state.resource.map((person, i) => (
    <Person key={i} {...person} />
  ));
  return <div>{mappedPeople}</div>;
}

我是否可以使每个人组件成为无状态组件，并且能够单击它并显示其余数据？这是我目前拥有的。

class Person extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visibility: false
    };
  }
  toggleVisible = () => {
    this.setState(prevState => ({
      visibility: !prevState.visibility
    }));
  };
  render() {
    return (
      <div>
        <h1 onClick={this.toggleVisible}>{this.props.name}</h1>
        {this.state.visibility && (
          <div>
            <p>{this.props.height}</p>
          </div>
        )}
      </div>
    );
  }
}

再次提前感谢您的任何见解或帮助！

你可以保留一个对象visible在您的父组件中，该组件将具有表示人员索引的键和表示该人员是否可见的值。通过这种方式，您可以在这个单个对象中切换人员的索引，而不是使用有状态的子组件。

Example

class PersonList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      resource: [],
      visible: {}
    };
  }

  // ...

  toggleVisibility = index => {
    this.setState(previousState => {
      const visible = { ...previousState.visibile };
      visible[index] = !visible[index];
      return { visible };
    });
  };

  render() {
    const mappedPeople = this.state.resource.map((person, i) => (
      <Person
        key={i}
        {...person}
        visible={this.state.visible[i]}
        onClick={() => this.toggleVisibility(i)}
      />
    ));
    return <div>{mappedPeople}</div>;
  }
}

const Person = (props) => (
  <div>
    <h1 onClick={props.onClick}>{props.name}</h1>
    {props.visible && (
      <div>
        <p>{props.height}</p>
      </div>
    )}
  </div>
);