在 React Native 中使用上下文来呈现 TextInput 值

Question

尝试创建具有全局可访问值数组的功能，用户可以输入这些值，然后输出 and/or 在不同组件中编辑。

我已经能够在一个屏幕上创建一个对象数组并让它输出正常，但我需要在另一个屏幕上显示相同的数组以便可以选择选项。

我不断收到此错误：

Error: Objects are not valid as a React child (found: object with keys {dispatchConfig, _targetInst, _dispatchListeners, _dispatchInstances, type, target, currentTarget, eventPhase, bubbles, cancelable, timeStamp, defaultPrevented, isTrusted, touchHistory, nativeEvent, isDefaultPrevented, isPropagationStopped}). If you meant to render a collection of children, use an array instead.

据我所知，很多搜索结果最终都不适用于我的特定问题。

WeightContext.js :


const WeightContext = createContext();

const WeightProvider = (props) => {
    const [weights, setWeights]= useState([]);
    return (
        <WeightContext.Provider value={[weights, setWeights]}>
            {props.children}
        </WeightContext.Provider>
    );
}
export { WeightContext, WeightProvider };

App.js :

import React from 'react';
import { View, Text } from 'react-native';
import {styles} from './styles/styles';
import { WeightProvider } from './contexts/WeightContext';
import Header from './components/Header';
import AddWeight from './components/AddWeight';
import WeightList from './components/WeightList';

const App = () => {

    return (
      <WeightProvider>
        <View style={styles.container}>
          <Text style={styles.headings}>App Component</Text>
            <Header />
            <AddWeight />
            <WeightList />  
        </View>
      </WeightProvider>
    );
}

export default App;

Header.js

import React, { useContext } from 'react';
import { View, Text } from 'react-native';
import { WeightContext } from '../contexts/WeightContext';
import { styles } from '../styles/styles';

const Header = () => {
    const [weights, setWeights] = useContext(WeightContext);

    return (
        <View style={styles.screen}>
            <Text style={styles.subHeading}>Weight Amounts List</Text>
            <Text style={styles.paragraph}>Total entries in weights: {weights.length}</Text>
        </View>
    );
}

export default Header;

WeightList.js:

import { View, Text } from 'react-native';
import Weight from './Weight';
import { WeightContext } from '../contexts/WeightContext';
import { styles } from '../styles/styles';

const WeightList = () => {
    const [weights, setWeights] = useContext(WeightContext)

    return (
        <View>
            <Text style={styles.subHeading}>Weight List</Text>
            {weights.map((item) => {
                return (
                    <Weight amount={item.amount} key={item.id}/>
                );
            })}
            
        </View>
    );
}

export default WeightList;

AddWeight.js

import React, { useContext, useState } from 'react';

import { View, Text, TextInput, Button } from 'react-native';
import { WeightContext } from '../contexts/WeightContext';
import { styles } from '../styles/styles';

const AddWeight = (onAddAmount) => {
    const [weights, setWeights] = useContext(WeightContext)

//// variables
    const [amount, setAmount] = useState('');

/// functions    
    const updateAmount = (valueEntered) => {
        setAmount(valueEntered);
    };

    const addAmountHandler = (amount) => {
        setWeights((prevWeights) => {
            return [...prevWeights, {id: Math.random().toString(), amount: amount}];
        });
    }

    return (
        <View style={styles.screen}>
            <Text>Add Weight</Text>
            <TextInput 
                placeholder="Add new Amount"
                maxLength={2}
                keyboardType={'numeric'}
                value={amount}
                onChangeText={updateAmount}
            />
            <Button title="ADD NEW WEIGHT" onPress={addAmountHandler}/>
        </View>
    );
}

export default AddWeight;

Weight.js

import React from 'react';
import { View, Text } from 'react-native';
import { styles } from '../styles/styles';

const Weight= ({amount}) => {

    return (
        <View style={styles.screen}>
            <Text style={styles.paragraph}>{amount}</Text>
        </View>
    );
}

export default Weight;

提前致谢！

Answer 1

这可能有效：

尝试将这样的值放入提供程序

value={{weights, setWeights}}

要使用它们，请这样说：

const {weights, setWeights} = useContext(WeightContext);

Answer 2

替换为： const addAmountHandler = (amount) => {...}

有了这个： const addAmountHandler = () => {...}

在 React Native 中使用上下文来呈现 TextInput 值

Using context in React Native to render TextInput values

javascript

state-management

react-native

react-context