为什么我的组件在更新后没有重新渲染？答案

【问题标题】：Why is my component not re-rendering after updating it?为什么我的组件在更新后没有重新渲染？
【发布时间】：2020-03-02 17:52:57
【问题描述】：

我正在尝试更改对象数组的状态，它确实更改了状态，但我的组件没有重新渲染。这是为什么呢？

useEffect(() => {
    if(data && data.rows) {
        data.rows.forEach(async (elem) => {
            const row = await axios.get(url);
            elem.members= row.data.length;
        })
    }
}, [data])

【问题讨论】：

标签： javascript reactjs object axios

【解决方案1】：

只有当你设置状态时组件才会重新渲染，无论是基于类的组件还是钩子

1.基于类的组件this.setState()

2.hooks setLen()

const [len, setLen] = React.useState(0);
useEffect(() => {
    if(data && data.rows) {
        data.rows.forEach(async (elem) => {
            const row = await axios.get(url);
            setLen(row.data.length);
        })
    }
}, [data])

【讨论】：

您在每次循环迭代中设置状态，这将导致多次渲染。
你正在改变单一状态，我不是这个意思
@Ralph 你在循环中改变状态值吗？
我正在循环更改单个对象属性。它可以工作，但不会重新渲染

【解决方案2】：

对于要重新渲染的组件，必须更新状态。您需要执行setState 以更新您的组件。此外，如果您从 props 获取更新的值，那么您应该考虑使用 componentDidUpdate 生命周期钩子的 react。

【讨论】：