Question

我有一个状态称为数据，该数据为空对象state = {data：{}}我在控制台日志中调用了RestAPI更新状态，使用了set state，它以正确的格式返回了数据，但是我需要的数据是this.state .data.title.rendered它表示未定义，但在控制台日志中它具有数据 Rest Api是这样的：

{id:5,title:{rendered:"home is good"}}


fetch(`http://localhost/react-wordpress/wp-json/wp/v2/posts/${this.props.match.params.id}`)
            .then((response) => response.json())
            .then((responseJson) => {
                const { title, fimg_url, content } = responseJson;
                this.setState({ title, fimg_url, content });
                this.setState({ data: responseJson })
            })
            .catch((error) => {
                console.error(error);
            });

在呈现的方法{this.state.data.title.rendered}中返回未定义，而{this.state.title.rendered}返回正确

Answer 1

是的。从后端提取之前，可能是undefined。

因此，您需要验证是否可以如下所示进行渲染：

const { data } = this.state;

return (
  <div>
    { data && data.title && data.title.rendered
      && ( <h1>data.title.rendered</h1> )
    }
  <div>
);

Answer 2

尝试这样

fetch(`http://localhost/react-wordpress/wp-json/wp/v2/posts/${this.props.match.params.id}`)
            .then((response) => response.json())
            .then((responseJson) => {
                const { title, fimg_url, content } = responseJson;
                this.setState({ data: {title, fimg_url, content} });
            })
            .catch((error) => {
                console.error(error);
            });

更新状态，数据返回未定义

2 个答案: