Question

我有一个组件，该组件使用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传递给子User节点时（每个子节点仅从id中获取一个元素并将其很好地呈现）。用户节点还给出错误“ 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行被删除时，我不再收到警告。还有另一个组件与此类似，但是不使用子组件。有什么办法可以使子组件起作用？

Answer 1

似乎问题在于第一次渲染时，没有任何数据来自提取，并且一切都崩溃了。要解决此问题，请更改渲染，如下所示：

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

最初将其渲染为空一秒钟，然后使用获取的数据重新渲染。虽然不是特别优雅，但确实可以。

“警告：无法在已卸载的组件上调用setState（或forceUpdate）”，但是组件没有setState？

1 个答案: