Question

这是我第一次在 React Native 和 Context API 中工作。我似乎无法弄清楚这个简单的事情，我一直在。现在尝试不同的例子几个小时。

我有一个简单的上下文名称 MyContext.js：

import React from 'react';

const MyContext = React.createContext({
    name: '',
    age: ''
});


export default MyContext;

我想从 name 更新 TextInput 的值。在另一个类名Info.js

<TextInput placeholder={"Enter Name"} onChangeText={'WHAT_TO_DO_HERE'} />
<TextInput placeholder={"Enter Age"} onChangeText={'WHAT_TO_DO_HERE'} />

我需要在 onChangeText 中做什么才能在 MyContext 中更新值？

更新：

我已将 MyContext.js 更新为：

import React from 'react';

const MyContext = React.createContext({
    name: '',
    age: ''
});

export const MyProvider = ({ children }) => {
    const [name, setName] = useState('');
    const [age, setAge] = useState('');

    return (
        <MyContext.Provider value={{ name, setName, age, setAge }}>
            {children}
        </MyContext.Provider>
    )
}

export default MyContext;

然后在 Info.js 我现在正在做：

const { name, age, setName, setAge } = useContext(MyContext);
<TextInput placeholder={"Enter Name"} onChangeText={setName} />
<TextInput placeholder={"Enter Age"} onChangeText={setAge} />

然后检查我正在执行的另一个文件 Summary.js：

    const { name } = useContext(MyContext);
    <Text>{name}</Text>

但文本仍然打印 '' 空。

同样在我的 App.js 中，我刚刚将屏幕放置在 NavigationContainer

    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Info Screen" component={Info} />
        <Stack.Screen name="Summary Screen" component={Summary} />
      </Stack.Navigator>
    </NavigationContainer>

我需要更改 App.js 中的任何内容吗？

Answer 1

您还需要一个提供程序，您也可以在 MyContext.js 中编写该提供程序

export const MyProvider = ({ children }) => {
    const [name, setName] = useState('');
    const [age, setAge] = useState('');

    return (
        <MyContext.Provider value={{ name, setName, age, setAge }}>
            {children}
        </MyContext.Provider>
    )
}

然后，您需要将需要该数据的组件包装在您的提供程序中。

在该组件中，您可以使用以下方法访问提供程序：

const { name, age, setName, setAge } = useContext(MyContext);

Answer 2

onChangeText 接受一个函数，传入输入的新文本。它应该看起来像这样：

irb(main):001:0> {a: 1, b: 2}.map{|k,v| [k.to_s, v.to_s]}.to_h               
=> {"a"=>"1", "b"=>"2"}

请记住，当您调用 setAge(text) 时，“text”输入会传入一个字符串，因此如果您有任何需要先执行的计算，您可能需要将其转换为数字。

无法使用上下文更新值

2 个答案: