javascript - 在由 componentDidMount 创建的 React 中切换折叠

Question

我正在调用 API 并将结果映射到我的状态，并且我也创建了一个可折叠 div，但切换不起作用。我正在对 div 使用react-bootstrap，它正在更新 true 和 false 之间的状态，但它不会影响崩溃。

async componentDidMount() {
  const response = await fetch('/api/getall');
  await response.json().then(data => {
  let results = data.data.map(item => {
      return(
        <div>
          <Button onClick={this.toggleOpen.bind(this)}>+</Button>
          <Panel expanded={this.state.open}>
            <Panel.Collapse>
              <Panel.Body>
                {item.text}
              </Panel.Body>
            </Panel.Collapse>
          </Panel>
            <hr/>
        </div>
      )
    })
    this.setState({results: results});
  })
}

toggleOpen() {
  this.setState({ open: !this.state.open })
  console.log(this.state.open)
}

因此，将会有多个可折叠 div 被返回并渲染到组件上，但 <Panel expanded={this.state.open}> 除外。似乎没有得到更新。仅当我在渲染功能上移动面板时它才有效

编辑:整个文件

import React, { Component } from "react";
import {Row, Col, Button, Panel} from 'react-bootstrap';

class Test extends Component {
  constructor(props) {
    super(props);
    this.state = {
      results: [],
      open: false
    }
  }

async componentDidMount() {
  const response = await fetch('/api/getall');
  const data = await response.json();
  this.setState({ results: data });
}

toggleOpen() {
  this.setState({ open: !this.state.open })
}
  render() {
    const { results } = this.state;
    console.log(results)
    return (
      <div>
        {results.map(item => {
          return(
            <div>
              <Button onClick={this.toggleOpen.bind(this)}>+</Button>
              <Panel expanded={this.state.open}>
                <Panel.Collapse>
                  <Panel.Body>
                    <p>ffff</p>
                  </Panel.Body>
                </Panel.Collapse>
              </Panel>
              <hr/>
            </div>
          )
        })}
      </div>
    );
  }
}

export default Test;

console.log(results) 在页面加载时运行 3 次并显示:

[]
{data: Array(2)}
{data: Array(2)}

但如果我这样做{this.state.results.data.map(item => {结果显示为空数组

Answer 1

您不应该将组件保存到状态中。正如您所发现的，这样做可能会导致状态和 Prop 的更改被忽略并且无法渲染。只需将数据保存到状态，然后在渲染方法中创建组件即可。

async componentDidMount() {
  const response = await fetch('/api/getall');
  const data = await response.json();
  this.setState({ results: data });
}

render() {
  const { results } = this.state;
  return (
    <div>
      {results.map(item => {
        return(
          <div>
            <Button onClick={this.toggleOpen.bind(this)}>+</Button>
            <Panel expanded={this.state.open}>
              <Panel.Collapse>
                <Panel.Body>
                  {item.text}
                </Panel.Body>
              </Panel.Collapse>
            </Panel>
            <hr/>
          </div>
        )
      })}
    </div>

}