Javascript 切换componentDidMount创建的反应中的崩溃

我正在调用一个API并将结果映射到我的状态，我也创建了一个可折叠的div，但是切换不起作用。我正在为div使用react引导，它正在更新状态fine，介于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)
}

---

但是如果我执行

{this.state.results.data.map（item=>{

results显示为空数组

，则不应将组件保存到状态。正如您所发现的，这样做会导致忽略对状态和道具的更改，而不会进行渲染。只需将数据保存到状态，然后在渲染方法中创建组件即可

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>

}

异步组件didmount（）{ const response=wait fetch（'/api/getall'）； const data=wait response.json（）； this.setState（{results:data}）； } render（）{ const{results}=this.state； 返回( {results.map（项=>{ 返回( + {item.text}

---

) })} }

---

您不应该将组件保存到状态。正如您所发现的，这样做会导致忽略对状态和道具的更改，而不会进行渲染。只需将数据保存到状态，然后在渲染方法中创建组件即可

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>

}

异步组件didmount（）{ const response=wait fetch（'/api/getall'）； const data=wait response.json（）； this.setState（{results:data}）； } render（）{ const{results}=this.state； 返回( {results.map（项=>{ 返回( + {item.text}

---

) })} }

---

当我这样尝试时，似乎有映射问题，我得到的是

结果。映射不是一个函数

，而是执行

控制台.log（结果）

显示它有数据。My

this.state.results

是一个数组如果results.map不是函数，那么this.state.results显然不是数组。我看到您在原始示例中有一个

data.data

的实例；当我使用

控制台时，是否需要执行
results.data.map
而不是
results.map
.log（results）

它显示

{data:Array（2）}

但我尝试通过

{results.data.map（item=>{

它给出的

无法读取未定义的
的属性“map”，然后将
结果
显示为空
此.state={results:{data:[]}
在Constructor中，我假设它与初始渲染有关，因为我只有一个console.log，它运行了3次，当我第一次尝试这种方法时，它显示一个空的arraySeems存在映射问题，我得到的是
results.map不是一个函数
，而是执行
console.log（results）
显示它有数据。My
this.state.results
是一个数组如果results.map不是函数，那么this.state.results显然不是数组。我看到您在原始示例中有一个
data.data
的实例；当我使用
控制台时，是否需要执行
results.data.map
而不是
results.map
.log（results）
它显示
{data:Array（2）}
但我尝试通过
{results.data.map（item=>{
它给出的
无法读取未定义的
的属性“map”，然后将
结果
显示为空
此.state={results:{data:[]}
在Constructor中，我假设它与初始渲染有关，因为我只有一个console.log，它运行了3次，第一次它显示一个空的数组（一个？你没有使用任何标识符；）其中一个？你没有使用任何标识符；）
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>

}