反应 API 上下文 - Function 不起作用

Question

In my application, I am using the context API to select rows and place them in an associative array. It worked with local state but with context API it doesn't access my function in LinesContext.js.

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

export const LinesContext = createContext();

const LinesContextProvider = props => 
{
  const [lines, setLines] = useState();

  const clickLine = (e) => 
  {
    console.log(e.target.parentNode);
    if (e.target.parentNode.className.length > 0)
    {
      e.target.parentNode.classList.remove("lineClicked");
      delete lines[e.target.parentNode.id];
      console.log(lines);         
    }
    else 
    {
      e.target.parentNode.classList.add("lineClicked");
      lines[e.target.parentNode.id] = e.target.parentNode.id;
      console.log(lines);
    } 
  }

  return (
    <LinesContext.Provider value={clickLine, lines}>
      {props.children}
    </LinesContext.Provider>
  )
}

export default LinesContextProvider;

I embed my entire app in App.js.

import './App.css';
import Connection from './Components/Connection/Connection';
import Window from './Components/Window/Window';
import CourriersListe from './Components/Courriers/Liste/CourriersListe';
import DestinatairesListe from './Components/Destinataires/Liste/DestinatairesListe';
import { Routes, Route } from 'react-router-dom';
import {BrowserRouter as Router} from 'react-router-dom';
import LinesContextProvider from './Context/LinesContext';

function App() {
  return (
    <div className="App">
      <LinesContextProvider>
        <Router>
          <Routes>
            <Route 
              path="/" element={<Window id="windowConnection" 
              title="Connexion" x="100px" y="100px" w="640px" h="480px" 
              main={<Connection destination="/courriers/liste" />} 
              status="Tout est OK." fullscreen={false}/>}
            />
            <Route path="/courriers/liste" element={<CourriersListe/>} />
            <Route path="/destinataires/liste" element={<DestinatairesListe />} />
          </Routes> 
        </Router>
      </LinesContextProvider>
    </div>
  );
}

export default App;

And I'm calling this ClickLine function in Liste.js. When clicking on a td, the function is supposed to be called and select / deselect the parent element, the tr, by matting it in color or not and by adding / removing it from an associative array.

import React, {useContext} from 'react';
import './Liste.css';
import Button from '../Button/Button';
import {LinesContext} from '../../Context/LinesContext';

function Liste(props) 
{
    const clickLine = useContext(LinesContext);
   
    const doubleClickLine = () =>
    {
        console.log("doubleClickLine"); 
    }

    return (
        <>
            <table className='tableList'>
                <thead>
                    <tr>
                        <th colSpan={props.headers.length+1}>{props.title}</th> 
                    </tr>
                    <tr>
                        {props.headers.map((header, h) =>
                            <th key={h}>{header}</th>                   
                        )}
                        <th>actions</th>  
                    </tr>
                </thead>
                <tbody>
                    {props.records.map((record, r) =>
                        <tr key={r} id={props.table+"_"+record[0]}>
                            {props.columns.map((column, c) =>
                                <td key={c} onClick={clickLine} onDoubleClick={doubleClickLine}>{record[column]}</td>         
                            )}
                            <td>
                                {props.actions.map((action, a) =>     
                                    <Button key={a} id={`${props.table}_${action[0]}_${record[0]}`} 
                                    type={action[1]} value={action[2]} click={action[3]}/>             
                                )} 
                            </td>
                        </tr>                
                    )}
                </tbody>
                <tfoot>
                    <tr>
                        <th colSpan={props.headers.length+1}>
                            {props.buttons.map((button, b) =>
                                <Button key={b} id={button[0]} type={button[1]} value={button[2]} click={button[3]}/>              
                            )}
                        </th>
                    </tr>
                </tfoot>
            </table>
        </>
    )
}

export default Liste;

Answer 1

Here is the problem:

<LinesContext.Provider value={clickLine, lines}>

You have two values separated with a comma in your value prop. In JavaScript, the result of the expression a, b is b . So you are effectively settings value={lines} .

Answer 2

It's probably this. value prop in the case of the provider is expecting one object/value to be passed once the context is accessed.

<LinesContext.Provider value={clickLine, lines}>

Since, {} is syntax. You need another pair of brackets to pass in an object.

<LinesContext.Provider value={{clickLine, lines}}>

Finally, when you call useContext(LinesContext) the return value will be whatever you passed in the value prop earlier which is { clickLine, lines } . so adjust your code accordingly,

const { clickLine, lines } = useContext(LinesContext)

in order to access the clickLine function as well as lines state properly.