反應-在api調用之前填充數據？

Question

我嘗試調用一些rest API，但是遇到了一些問題。

未捕獲的TypeError：無法讀取未定義的屬性“名稱”

所以這是我的代碼：

class MovieDetailViewer extends React.Component {
constructor() {
    super();
    this.state = {
        movieResponse: {}, // wont work
        movieResponse: {
            "id": 1,
            "barcode": "000-000-003",
            "name": "Django Unchained",
            "fsk": "FSK_18",
            "lend": false,
            "deleted": false,
            "genre": {
                "id": 1,
                "name": "Western"
            },
            "source": {
                "id": 1,
                "name": "Blu-Ray"
            }
        } // will work
}

componentDidMount() {
    fetch('apiurltogetmovie')
        .then((response) = > response.json())
        .then(responseJson = > {
            this.setState({ movieJsonResponse: responseJson.movie });

        });
}

render() {
    return (
        <div>
            <MovieDetails
                movie={this.state.movieJsonResponse}
            />
        </div>
    );
}
}

class MovieDetails extends React.Component {
render() {
    const movie = this.props.movie;

    return (
        <div>
            <h1>{movie.name}</h1>
            <h2>{movie.gerne.name} - {movie.source.name}</h2>
            <p>
                {movie.comment}
            </p>
        </div>
    )
}
}

看起來JSON響應有問題，但是如果使用某些默認JSON初始化movieResponse ，它就可以工作。 在谷歌我找不到狀態用一些值初始化的任何反應的例子。 最佳實踐是什么？

所以我不確定為什么gerne.name沒有undefinied 。 如果我將JSON響應記錄到控制台中就可以了。

Answer 1

問題在於，在MovieDetailViewer的API調用完成之前，會渲染MovieDetails 。 但是，由於響應不可用， movieResponse仍等於初始值，在這種情況下為初始值。 因此，當嘗試訪問movie.genre.name ，由於movie為空，因此genre將是未定義的，並且name無法訪問。 要解決此問題，您僅應在響應可用后才渲染MovieDetails ：

class MovieDetailViewer extends React.Component {

    constructor() {
        super();
        this.state = {
            movieResponse: null
        }
    }

    ...

    render() {
        return (this.state.movieJsonResponse) ? (
            <div>
                <MovieDetails movie={this.state.movieJsonResponse} />
            </div>
        ) : (
            <div className="loader">loading...</div>
        );
    }
}

值得注意的是，您的檢查可能比這更徹底，並且在描述查詢當前狀態（查詢，成功，錯誤等）的狀態中包含另一個屬性。

Answer 2

可以在此處使用的最佳做法：

1. 使用prop-types強制props與您期望的類型相同。
2. 驗證對象的內部字段，例如： movie && movie.name.
3. 使用條件渲染，例如{ movie && movie.name && <h1>{movie.name}</h1>}