“警告：无法在未安装的组件上调用 setState（或 forceUpdate）”，但组件没有 setState？答案

【问题标题】："Warning: Can't call setState (or forceUpdate) on an unmounted component", but component does not have setState?“警告：无法在未安装的组件上调用 setState（或 forceUpdate）”，但组件没有 setState？
【发布时间】：2018-08-29 16:49:03
【问题描述】：

我有一个组件，它使用 fetch 从 URL 中获取用户列表，并且应该将它们放入 Table 组件中。获取请求是标准的

componentDidMount() {
    fetch('http://localhost:8000/getUsers')
        .then(response => response.json())
        .then(data => {
            this.setState({ ids: data })
        })
        .catch(err => console.error(this.props.url, err.toString()))
}

问题似乎出在将 this.state.ids 传递给子用户节点时（每个节点只从 ids 中获取一个元素并很好地呈现它）。用户节点也给出错误“this.props.data is undefined”，因此可能是子节点在父节点更新状态后没有重新渲染。

for (let i = 0; i < 10; i++) {
        tbody.push(<tr key={i} ><td><User data={this.state.ids[i]} /></td></tr>);
}

用户只有一个 render()，没有调用 setState 或任何东西。删除 tbody.push 行后，我不再收到警告。还有另一个组件执行与此类似的操作，但不使用子组件。有什么方法可以使这个子组件工作？

【问题讨论】：

不确定最终答案是什么，但有两个提示，一个是您的密钥应该是实际 id 而不是索引。这可以防止您发生关键冲突。两个不应该循环到 this.state.ids.length 而不是 10？
对于循环，当然，但现在我将它设置为一个比它实际获取的值更大的值来测试表分页。不过，关于钥匙的好提示，谢谢。
您的Table 组件的constructor 中是否有this.state = {ids: []} 初始化行？
确实如此。这些值作为

标签： reactjs

【解决方案1】：

似乎问题在于，在第一次渲染时，提取中没有数据，一切都崩溃了。要修复，请将渲染更改为：

render() {
    if (this.state.ids.length === 0) {
        return (/*something not visible*/);
    } else {
        // everything else
    }
}

它最初会在一瞬间渲染为空，然后使用获取的数据重新渲染。它不是特别优雅，但确实有效。

【讨论】：

为了让它更优雅一点，在length === 0 时返回一个加载指示器。风格明智，也许改变你的回报。所以，不要检查=== 0，而是检查!== 0，这样你的主要回报，即。主要组件代码，位于代码的顶部，您的等待状态代码位于下方。你也可以使用三元 return (!==0) ? <Component /> : <Loading />