Question

当我更新另一个组件中的状态时，无法在git archive中重新渲染Provider，因此使用者数据不会更改。

ContextProvider.js

ContextProvider.js

在另一个组件中，我称之为：

export const AppContext = React.createContext({basketNumber:0});
export class ContextProvider extends React.PureComponent {
  state = {
      basketNumber:0,
  };

  render() {
    return (
      <AppContext.Provider value={this.state}>
        {this.props.children}
      </AppContext.Provider>
    );
  }
}

在import { AppContext } from './../../../components/ContextProvider'; export default class Example extends React.PureComponent { static contextType = AppContext; }类中，我可以打电话给example

basketNumber

但是我该如何更新呢？

我尝试过：

this.context.basketNumber

// EDIT

我将此代码添加到Context provider：

this.context.basketNumber = 10;

并尝试在addNumber(number) { this.setState({basketNumber:id}); };类中调用它：

example

但是我得到这个错误：

_this.context.addNumber是一个函数

Answer 1

更新上下文值。

在这里Dynamic Context

结帐

或者您可以在上下文中向下传递函数以更新上下文。

在这里Updating Context from a Nested Component

Answer 2

您可以在此处将其设置为功能组件：

const AppContext = React.createContext();
export const ContextProvider = ({ children }) => {
  const basketNumbers = [
    { number: 0 },
    { number: 1 }
  ]
  return (
    <AppContext.Provider value={basketNumbers}>
      {children}
    </AppContext.Provider>
  )
}

export default AppContext;

然后在其他组件中这样称呼它：

import React, { useContext } from 'react';
import { View, Text, StyleSheet, FlatList } from 'react-native';
import AppContext from '../context/AppContext';

const IndexScreen = () => {
  const basketNumbers = useContext(AppContext);

  return (
    <View>
      <Text>Index Screen</Text>
      <FlatList data={basketNumbers} keyExtractor={(basketNumber) => basketNumber.number} renderItem={({ item }) => {
        return <Text>{item.number}</Text>
      }} />
    </View>
  )
};

const styles = StyleSheet.create({});

export default IndexScreen;

现在，如果您要编辑或更改数据，它将导致应用程序重新呈现正在处理状态的数据。

我所拥有的是传递静态列表并使用上下文api。

因此，您需要在Provider内初始化一个状态。

因此，您需要传递一个具有几个属性的对象，也许是一个名为data的属性，它将具有您的basketNumbers数组。您的第二个属性可能是addBasketNumber: () => {}。它是一个回调函数。

因此，如果我标记为索引屏幕的第二个组件曾经调用addBasketNumber，则将导致提供程序随机生成一个新的basketNumber，并将其添加到basketNumbers列表中。因此，basketNumbers将重新呈现，整个应用程序将重新呈现，并且“索引”屏幕将获得basketNumbers的全新列表。

因此，您想要对我变成功能性组件的第一个组件执行以下操作：

import React, { useState } from 'react';

const AppContext = React.createContext();
export const ContextProvider = ({ children }) => {
 const [basketNumbers, setBasketNumbers] = useState([]);

因此，默认情况下，您将有一个空数组，因为您将开始时没有篮子编号。现在setBasketNumbers是您的设置器，可以完全替换basketNumbers中的所有内容，但是由于我已经提到过具有回调函数，因此您可以像这样添加一个辅助函数：

import React, { useState } from 'react';

const AppContext = React.createContext();

export const ContextProvider = ({ children }) => {
  const [basketNumbers, setBasketNumbers] = useState([]);

  const addBasketNumber = () => {
    setBasketNumbers([...basketNumbers]);
  };

因此，此操作的目标是使用您的设置器将新的购物篮编号添加到您的basketNumber变量中。您还需要使用该辅助函数来创建一个新数组，而不更改basketNumbers的原始数组。因此，[...basketNumbers]只是意味着创建一个新数组，并在该新数组内部获取我们拥有的所有当前购物篮编号并将其添加到该数组中。

然后，您想为该setBasketNumbers()创建第二个参数，该参数将是一个对象，新篮子编号的属性值将增加1。可能是${basketNumbers.length + 1}吗？无论如何，您都希望将其传递到Context中，并应在FlatList中重新呈现。

是这样的：

return (
    <AppContext.Provider value={{ data: basketNumbers, addBasketNumber }}>
      {children}
    </AppContext.Provider>
  )

因此，您似乎正在尝试使用或尝试使用上下文来管理状态。您无需使用上下文来管理状态，而是使用上下文来移动数据。

我正在使用useState呼叫在这里管理状态。上下文不能代替管理状态，例如Redux。

react-native：如何在context api中更新状态？

2 个答案: