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

Question

我在组件中使用多个挂钩，我需要将挂钩传递给值。 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>
    )
}

Answer 1

您可以将上下文值作为对象传递。我还建议创建您自己的 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,
    setName,
    price,
    setPrice,
    amountOfOptions,
    setAmountOfOptions,
    totalAmountSpent,
    setTotalAmountSpent,
    listOfOptions,
    setListOfOptions,
    clock,
  } = useOptionsContext();
  
  ...
}

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

How to pass multiple hooks to the value of a context API?

reactjs

react-context