Question

我有一个非常简单的react native屏幕，如下所示：

class BasicScreen extends React.Component {
  state = {
    data: [],
    myItems: [],
  };
  componentDidMount() {
    this.checkforItems();
  }
  checkforItems = async () => {
    AsyncStorage.getItem('MyItems').then(item => {
      if (item) {
        this.setState({
          myItems: JSON.parse(item),
        });
      } else {
        console.log('No data.');
      }
    });
  };
  render() {
    return (
      <View>/* A detailed view */</View>
    )
  }
}

问题是，它导致以下错误：

Cannot update a component from inside the function body of a different component.

我不确定如何解决此问题。请帮忙。

Answer 1

这看起来像是要用任何最新映射的myItems覆盖item，而不是附加每个新项。

您可以尝试将项目映射到componentDidMount()中的数组，然后在useEffect调用中设置状态。

const BasicScreen = () => {
  const [myData, setData] = useState([]);
  const [myItems, setItems] = useState([]);

  const checkForItems = () => {
    var storageItems = AsyncStorage.getItem("MyItems").then((item) => {
      if (item) {
        return JSON.parse(item);
      }
    });
    setItems(storageItems);
  };

  useEffect(() => {
    async function getItems() {
      await checkForItems();
    }
    getItems();
  }, []);

  return (
    <View>
      <Text>{myItems[0]}</Text>
    </View>
  );
};

export default BasicScreen;

React Native：无法从其他组件的函数体内更新组件

1 个答案: