对象更新后如何重新渲染组件？答案

【问题标题】：How to rerender component after object update?对象更新后如何重新渲染组件？
【发布时间】：2021-02-15 20:33:58
【问题描述】：

我正在尝试在用户给出自己的评分后更新评分平均值。我设法更新了对象，但不知道如何让它重新渲染组件，所以会出现新的平均值。我这部分的代码：

const pizza = props.route?.params?.pizza ?? null;

const rateClicked = () => {
    doRate(pizza.id, highlight, token)
    .then( resp => {
        Alert.alert("Rating", resp.message);
        doGetDetails(pizza.id, token).then( resp => {
            pizza.avg_rating = resp.avg_rating;
        });
    })
}

谢谢！

【问题讨论】：

能不能只把评分设置为状态，然后更新状态？
const rateClicked 在Press 上运行，我不确定如果我要使用setState，我该如何重新渲染组件。我不能将 const rateClicked 放入 useFocusEffect。我是新手，所以也许我的方法不是很聪明
这是一个基于类的组件还是函数式组件？
功能：export default function Details(props) {
如果您使用挂钩，您可以为评级设置状态挂钩，只需将评级更改为用户在 inputtext 中输入的新状态即可。如果不是因为它的功能，你必须使用 redux 或者只使用基于类的方法

标签： react-native render rerender

【解决方案1】：

这样你就可以更新状态（Hooks）

export default function Details(props) {
 
  const [pizzaData, setPizzaData] = useState(props.pizza); <-- "props.pizza" is default -->

  const rateClicked = () => {
    doRate(pizza.id, highlight, token)
    .then( resp => {
        Alert.alert("Rating", resp.message);
        doGetDetails(pizza.id, token).then( resp => {
            const pizzaData = {...pizzaData};
            pizzaData.avg_rating = resp.avg_rating;
            setPizzaData(pizzaData); // reset state here to rerender 
        });
    })
  }
}

【讨论】：

感谢您的帮助！我刚刚尝试过，但结果与我的示例相同。对象正在更新，但它不会重新呈现，直到我在组件上切换某些东西（在我的情况下，我有 5 次启动，用户点击以设置评级，然后单击“Rate”按钮）。在我再次选择一些星星后它会更新，但当我单击“评分”按钮时不会更新。有什么想法吗？
谢谢！在你的帮助下，我做到了！但是，如果其他人会遇到类似问题的一些信息：const pizzaData = {...pizzaData}; - 这使对象为空，因此设置 avg_rating 是不够的，但我必须从resp 设置整个对象pizza。像这样：const rateClicked = () => { doRate(pizza.id, highlight, token) .then( resp => { Alert.alert("Rating", resp.message); doGetDetails(pizza.id, token).then( resp => { const pizza = {...pizza}; setPizza(resp); });

【解决方案2】：

为了让组件重新渲染，你应该有一个 state 或一个 props 变量来改变。

在您的情况下，当您使用 doRate 进行更新时，要在 props 数据重新获取中更改它，应该在父组件中完成。
或者你可以改变一个状态变量：

const pizza = props.route?.params?.pizza ?? null;

const rateClicked = () => {
    doRate(pizza.id, highlight, token)
    .then( resp => {
        Alert.alert("Rating", resp.message);
        doGetDetails(pizza.id, token).then( resp => {
            this.setState(avg_rating: resp.avg_rating);
        });
    })
}

【讨论】：

我不得不将冒号更改为逗号，因此 IDE 不会显示任何错误：this.setState(pizza.avg_rating, resp.avg_rating)。但是，我得到TypeError: undefined is not an object (evaluating '_this.setState')]。我对“这个”还不是很熟悉，对此感到抱歉，感谢您的帮助
我不建议你复制粘贴代码，而是看看它在做什么。你没有提供整个组件，所以我只是猜测这是一个类组件。显然，您有一个功能组件，这就是 this.setState 抛出错误的原因