如何解决在现有状态问题期间无法更新 - 反应？

Question

我有一个函数，我在 render() 方法中调用它 它是 setState 一个来自该州的标志。

所以我得到了这个错误

在现有状态转换期间无法更新（例如在 render)。

我读到了这个错误，我的理解是因为我在渲染方法中设置状态，这是错误的方法。

所以如果你有任何想法来告诉我，我不得不这样做。

关于这个函数的主要思想

我有一个对象数组“名称为工具”所以在每个对象中我都有“id、name、count、price” 这样就会像这样在 UI 中呈现三个输入

并且我有一个处于状态“isEmpty”的布尔标志，它在将此数据发送到数据库之前检查数组中的每个输入。

代码

State = {
   toolsUsed: [
      {
        id: 0,
        name: '',
        price: '',
        count: '',
      },
    ],
    // Checker
    isEmpty: false,
}

renderToolsUsed = () => {
  const {toolsUsed} = this.state;
  const tools = toolsUsed.map((item, i) => {
  const {count, price, name, id} = item;
  this.setState({
     isEmpty: ['name', 'price', 'count'].every(key => item[key].length > 0),
   });
   return (
      <View key={i} style={styles.tools}>
         .... Inputs here ...
      </View>
   );
 });
 return tools;
};

JSX

render() {
    return (
       <View>
           {this.renderToolsUsed()}
       </View>
     );
}

Answer 1

你不能像这样更新状态。这就像无限循环。 setState 会触发render，然后render 会触发另一个setState，然后继续循环。

我不知道为什么您已经拥有toolsUsed 时还需要isEmpty，您可以使用它来检查所有输入是否为空。

假设您坚持使用isEmpty，那么您可以在输入更改事件中设置它。

代码未经测试。我直接从浏览器编写代码。但是你可以在代码之前得到想法。

renderToolsUsed = () => {
  const { toolsUsed } = this.state;
  const tools = toolsUsed.map((item, i) => {
    return (
      <View key={i} style={styles.tools}>
         <TextInput value={item.name} onChangeText={(text) => {
             this.setState({
                toolsUsed: [
                  ...toolsUsed.slice(0, i - 1),
                  {...item, name: text },
                  ...toolsUSed.slice(i)
                ]
             }, this.updateEmptyState)
         }>
         // other input here
      </View>
    );
 });

 // ...
};

updateEmptyState = () => {
  this.setState({
    isEmpty: this.state.toolsUsed.every(x => x.name === '' && x.price === '' && x.count === '')
  })
}

Answer 2

状态并非旨在存储您在应用中拥有的所有数据

你需要什么isEmpty状态？

为此，请使用全局变量

或者当你想要它退出渲染时检查它