Javascript I'；我正在尝试更新嵌套在数组中的对象的状态。。。使用json数据

因此，我们的目标是从GoogleBooksAPI获取数据，该API以与我的状态相同的形式返回JSON数据。我想用JSON数据返回的标题字符串更新标题。现在，我在代码中标记的行上得到一个“编译失败”。然后，我想将标题作为道具传递给列表组件，该组件将在每个映射通过时将其呈现为列表项。因此，如果提取20本书的数据，我将呈现20种不同的标题。我是新来的，所以我不确定这里有多少问题

import React, { Component } from 'react';
import List from './List.js';

export default class Main extends Component {
    state ={
        items : [{
            volumeInfo : {
                title : "",
            }
        }]
    }

    componentDidMount() {
        fetch(`https://www.googleapis.com/books/v1/volumes?q=flowers+inauthor:keyes&key=AIzaSyAWQ0wFzFPQ3YHD_uLDC7sSs-HPRM3d__E`)
        .then(res => res.json())
        .then(
            (result) => {
                this.setState({
                    items : [{
                        volumeInfo : {
                            title : result.items.map((book) => {
                                const name = book.volumeInfo.title;
                                return name;
                            })
                        } 
                    }] });
            })
    }
    render() {
        return (
            <div>
                <header>
                    <h2>Google Book Search</h2>
                </header>
                <List title={this.state.items}/>
            </div>
        )
    }
}

import React，{Component}来自'React'；
从“/List.js”导入列表；
导出默认类主扩展组件{
陈述={
项目：[{
卷信息：{
标题：“，
}
}]
}
componentDidMount（）{
取回(`https://www.googleapis.com/books/v1/volumes?q=flowers+输入者：keyes&key=AIzaSyAWQ0wFzFPQ3YHD\u uLDC7sSs-HPRM3d\uuu E`）
.then（res=>res.json（））
.那么(
（结果）=>{
这是我的国家({
项目：[{
卷信息：{
标题：result.items.map（（书）=>{
const name=book.volumeInfo.title；
返回名称；
})
} 
}] });
})
}
render（）{
返回(
谷歌图书搜索
)
}
}

下面是List.js

import React, { Component } from 'react'

export default class List extends Component {
    render() {

        return (
            <div>
                <ul>
                    <li>{this.props.items}</li>
                </ul>
            </div>
        )
    }
}

import React，{Component}来自“React”
导出默认类列表扩展组件{
render（）{
返回(

{this.props.items}

)
}
}

使用此选项更改设置状态功能

this.setState({
                    items : [{
                        volumeInfo : {
                            title : result.items.map((book) => {
                                const name = book.volumeInfo.title;
                                return name;
                            })
                        } 
                    }] });

看起来括号就是问题所在。

导出默认类主扩展组件{
export default class Main extends Component {

  state ={
    items : []
  }

  componentDidMount() {
    fetch(`https://www.googleapis.com/books/v1/volumes?q=flowers+inauthor:keyes&key=AIzaSyAWQ0wFzFPQ3YHD_uLDC7sSs-HPRM3d__E`)
    .then(res => res.json())
    .then((result) => {
      const titleList = result.items.map((item)=>{return item.volumeInfo.title});
      this.setState({items: titleList})
        })    
  };

  render(){
    const {items} = this.state;
    const titleComponent = items.length > 0
        ? items.map((item)=>{
            return <List title={item} />
          }) 
        : null;
  return (
    <div className="App">
       <header>
          <h2>Google Book Search</h2>
       </header>
       {titleComponent}
    </div>
  )
  }
}

陈述={
项目：[]
}
componentDidMount（）{
取回(`https://www.googleapis.com/books/v1/volumes?q=flowers+输入者：keyes&key=AIzaSyAWQ0wFzFPQ3YHD\u uLDC7sSs-HPRM3d\uuu E`）
.then（res=>res.json（））
。然后（（结果）=>{
const titleList=result.items.map（（item）=>{return item.volumeInfo.title}）；
this.setState（{items:titleList}）
})    
};
render（）{
const{items}=this.state；
常量标题组件=项。长度>0
？项目图（（项目）=>{
返回
}) 
：null；
返回(
谷歌图书搜索
{标题成分}
)
}
}

---

如果列表组件工作正常，则应使用上述代码。

由于

fetch（）

的结果与状态的

items

属性具有相同的结构，因此在

then（）

回调中只需直接将结果设置为如下所示的状态：

componentDidMount() {
    fetch('your/long/url')
    .then(res => res.json())
    .then((result) => {
        this.setState({ items: (result.items || []) });
    });
}

现在您的状态已用所需数据更新，您需要将其作为道具传递给列表组件：

render() {
    return (
        <div>
            <header>
                <h2>Google Book Search</h2>
            </header>
            <List items={ this.state.items } />
        </div>
    );
}

---

首先，您的代码缺少

map（）

函数的右括号（在//错误注释正上方的行中），这可能是编译错误的原因。此外，您正在将获取的结果映射到

title

属性，而不是

items

属性，因此，

项

保持不变，现在，

标题

变成了一个对象数组，我认为这不是您想要的。最后，您将

this.state.title

传递给

列表

组件，但state对象中没有名为

title

的属性，您需要传递

this.state.items

，请在问题中包含./List.js的代码。@GhassenLouhaichi好的，我明白了。我已经更新了代码以反映列表和.items，而不是.title。我不确定如何将结果映射到title属性。我添加了一个答案，希望能有所帮助。是的，你是对的，这修复了错误。现在看来，我并没有正确地用数据更新状态。知道为什么吗？你传递的是这个.state.title而不是这个.state.volumeInfo，你必须使用列表组件中道具的标题。没错，就是这样。我将研究你在这里做了什么。我们可以通过聊天讨论。你能解释一下这里发生了什么吗：

（{items:（result | |[]））}）

当然，外部的

（{

将

fetch（）

的结果分配到状态的

items

属性中。

x | |[]

是一个保护层，它可以防止在该状态属性中分配空值。这在以后的列表组件中很有用，因此

items.map（）

调用不会抛出“无法读取未定义的属性“map”。（如果

fetch（）

没有返回任何内容），我看到了。因此这对我来说很有意义，而且它更干净/更分隔。但是，我得到了一个“this.props.items.map不是函数”错误哦，我的错，应该是

result.items

。现在更正我的答案。没问题，我自己应该能够理解。我很感激！

render() {
    return (
        <div>
            <ul>
                { this.props.items.map((book, i) => (
                    <li key={ i }>{ book.volumeInfo.title }</li>
                )) }
            </ul>
        </div>
    );
}