После извлечения состояние возвращается неопределенным

Question

Я использую fetch для публикации данных в моем локальном API, но при попытке получить их и возникает ошибка, подобная этой. В результате я получаю результат совершенно нормально, но после этого пытаюсь перевести его в состояние, как показано ниже:

this.setState ({ items: result.items})

но предметов возвращает не определено и не знаете почему?

Мой код:

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
          items: [],
          error: null,
          isLoaded: false

        };
        this.setState = this.setState.bind(this);
      }

      componentDidMount() {
        fetch("http://localhost:3000/items")
          .then(res => res.json())
          .then(result => {   
                console.log(result);
              this.setState({
                items: result.items,
                isLoaded: true
              });
                console.log(this.state.items)
            },                       
            (error) => {
              this.setState({
                isLoaded: true,
                error
              });
            }
          )
      }


      render() {
        const { error, isLoaded, items } = this.state;
        if (error) {
          return <div>Error: {error.message}</div>;
        } else if (!isLoaded) {
          return <div>Loading...</div>;
        } else {
          return (

            <ul>
                <h1>Saved items:</h1>
              {
                items && items.map(item => (
                    <li key={item.name}>
                       item: {item.name} {item.price}
                    </li>
                ))
            }
            </ul>
          );
        }
      }
}

Answer 1

Вы можете сделать либо:

this.setState({
    items: result.items || [],
     isLoaded: true
});

или

{
    items && items.map(item => (
        <li key={item.name}>
            {item.name} {item.price}
        </li>
    ))
}