您的代码有两个问题。
您的子组件的初始状态是通过props设置的。
this.state = { data: props.data};
引用此SO答案:
将初始状态作为a传递给组件
prop是一种反模式,因为getInitialState(在我们的示例中为constuctor)方法仅在组件首次呈现时才调用。再也没有了。这意味着,如果重新渲染该组件并传递一个
不同的 值aprop,则该组件将不会做出相应的反应,因为该组件将从首次渲染起就保持该状态。这很容易出错。
因此,如果您无法避免这种情况,理想的解决方案是使用该方法
componentWillReceiveProps来侦听新道具。
将以下代码添加到子组件将解决子组件重新渲染的问题。
componentWillReceiveProps(nextProps) { this.setState({ data: nextProps.data }); }
第二个问题是
fetch。
_makeApiCall(endpoint) { fetch(endpoint) .then((response) => response.json()) // ----> you missed this part .then((response) => this.setState({ response }));}
这是一个有效的小提琴:https :
//jsfiddle.net/o8b04mLy/
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)