如何将多个挂钩传递给上下文API的值？

问题描述

我正在组件中使用多个挂钩，我需要将挂钩传递给值。 react文档有点混乱，我不太了解如何格式化该信息，以便我的其他组件可以使用它。我如何将钩子传递给该值，以便正确设置其格式，以便可以使用它。因为我认为我做错了，有人可以指出我正确的方向吗？

上下文API

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


export const OptionsContext = createContext();


export const Optionsprovider = props => {

    const [name,setName] = useState('');
    const [price,setPrice] = useState(0);
    const [amountOfOptions,setAmountOfOptions] = useState(0);
    const [totalAmountSpent,setTotalAmountSpent] = useState(0);
    const [listofOptions,setlistofOptions] = useState([]);
    const { clock } = new Date().toLocaleDateString();

    return (
        <OptionsContext.Provider value={
            [name,setName],[price,setPrice],[amountOfOptions,setAmountOfOptions],[totalAmountSpent,setTotalAmountSpent],[listofOptions,setlistofOptions],clock

        }>
            { props.children}
        </OptionsContext.Provider>
    );
}

Passing the API here 
export default function Inputs() {

    const [name,setName] = useContext(OptionsContext);
    const [price,setPrice] = useContext(OptionsContext);
    const [amountOfOptions,setAmountOfOptions] = useContext(OptionsContext);
    const [totalAmountSpent,setTotalAmountSpent] = useContext(OptionsContext);
    const [listofOptions,setlistofOptions] = useContext(OptionsContext);
    const { clock } = new Date().toLocaleDateString();

    const handleSubmit = (e) => {
        e.preventDefault()
        e.target.reset();
        addlistofOptions(
            {
                name,price,amountOfOptions,totalAmountSpent
            }
        )

    }

    useEffect(() => {
        setTotalAmountSpent((price * amountOfOptions) * 100)

    });

    const getInputValue = (hookSetter) => (e) => {
        let { value } = e.target;
        return hookSetter(value)
    }

    const addlistofOptions = (lists) => {
        setlistofOptions([...listofOptions,lists])
    }

    // const deleteItem = () => {
    //     listofOptions.filter
    // }

    return (
        <div className="formoutputs">
            <form onSubmit={handleSubmit}>
                <input type="text" className="input stockname" placeholder="Enter Stock Symbol" onChange={getInputValue(setName)} />
                <input type="text" className="input stockprice" placeholder="Enter Option Price" onChange={getInputValue(setPrice)} />
                <input type="text" className="input stockamount" placeholder="Enter Number Of Option" onChange={getInputValue(setAmountOfOptions)} />
                <button type="submit" className="btn">Submit</button>
            </form>
            <div className="outputs">
                <table>
                    <tr>
                        <th>Date</th>
                        <th>Stock Name</th>
                        <th>Price Of Option</th>
                        <th>Number Of Options</th>
                        <th>Total Amount Spent</th>
                    </tr>
                    {listofOptions.map(option => {
                        return (
                            <tr>
                                <td>{clock}</td>
                                <td>{option.name}</td>
                                <td>${option.price}</td>
                                <td>{option.amountOfOptions}</td>
                                <td>${option.totalAmountSpent}</td>
                            </tr>
                        )
                    })}
                </table>
            </div>
        </div>
    )
}

解决方法

您可以将上下文值作为对象传递。我还建议您创建自己的useOptionsContext挂钩，这样就无需调用useContext(OptionsContext)：

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

const OptionsContext = createContext();

export const OptionsProvider = props => {
  const [name,setName] = useState('');
  const [price,setPrice] = useState(0);
  const [amountOfOptions,setAmountOfOptions] = useState(0);
  const [totalAmountSpent,setTotalAmountSpent] = useState(0);
  const [listOfOptions,setListOfOptions] = useState([]);
  const { clock } = new Date().toLocaleDateString();

  const value = {
    name,setName,price,setPrice,amountOfOptions,setAmountOfOptions,totalAmountSpent,setTotalAmountSpent,listOfOptions,setListOfOptions,clock,};

  return (
    <OptionsContext.Provider value={value}>
      {props.children}
    </OptionsContext.Provider>
  );
}

export useOptionsContext = () => useContext(OptionsContext);

然后按以下方式使用它：

export default function Inputs() {
  const {
    name,} = useOptionsContext();
  
  ...
}