javascript - 即使应该在那里，也无法访问对象属性

Question

我在 react 中有一个组件，可以获取用户从后端编写的故事。然后我将 json 存储在 storyState 中当我记录它时，需要的属性如“title”在那里，但是当我尝试访问属性标题时，我收到此错误:

TypeError: Cannot read properties of undefined (reading 'title')

这是代码:

import { useState, useEffect } from 'react';
import styled from 'styled-components';

export const StoryPage = () => {
    const [storyState, setStoryState] = useState({
        story: {},
        isLoaded: false,
        error: null,
    });

    const queryString = window.location.search;
    const urlParams = new URLSearchParams(queryString);
    const id = urlParams.get('storyid');

    useEffect(() => {
        fetch('http://localhost:5000//getstory?storyid=' + id)
            .then((response) => {
                console.log('response is', response);
                if (response.status !== '200') {
                    let err = Error;
                    err.message = 'Invalid response code: ' + response.status;
                    setStoryState({ error: err });
                }
                return response.json();
            })
            .then((json) => {
                console.log('json is', json);
                setStoryState({
                    story: json.story,
                    isLoaded: true,
                });
            });
    }, []);

    console.log('storystate.story', storyState.story);

    return (
        <>
            <h1>test</h1>
            <h1>{storyState.story.title}</h1>
        </>
    );
};

export default StoryPage;

我检查了 StackOverflow 并尝试使用 JSON.parse ，不幸的是没有奏效。
当我这样做时 < h1 >{storyState.story}</ h1 >我以字符串形式获取整个对象，并按预期获得所有属性。
这是我的控制台:

Answer 1

问题在这一行 -

if (response.status !== "200") {
}

它应该是 200 而不是“200”。您可以查看 console.log("response is", response); ，它是数字 200 不是字符串。
注意:始终使用以下构造来设置对象的状态 -

{ ...previousState, { newkey: newvalue } }

以上使用 object 的先前值并替换为新值。