React Context API不需要重新更新

如何解决React Context API不需要重新更新

我正在使用next的调度方法来更改索引，但是当尝试访问索引并调用时，索引保持不变。调度动作后如何访问新上下文？ 同样，代码中的某些内容至少在索引字段方面将上下文重置为其原始状态。这是调度问题，还是我配置不正确？ 其他字段似乎正在正确更新，并且在单击按钮时以及在断开连接时使用下一个或上一个分派操作都可以工作。

// store.js
import React,{ createContext } from "react";

const initialState = {
  calling: 0,index: 0,connection: undefined,incoming: false,from: undefined,contacts: [
    {
      name: "Some Name",phoneNumber: "[phone]",emailAddress: "[e-mail]",rating: 5.0,},{
      name: "Some Other Name",phoneNumber: "[phone]",emailAddress: "[e-mail]",],};

const store = createContext(initialState);
const { Provider } = store;

function reducer(state,action){
  const newState = state;
    const { contacts,incoming,index } = newState;
    switch (action.type) {
      case "ADD_CONTACT":
        newState.contacts.push(action.contact);
        return newState;
      case "ADD_CONNECTION":
        return {
          ...newState,connection: action.connection
        }
      case "CANCEL_INCOMING":
        return {
          ...newState,incoming: false
        }
      case "MAKE_CALL":
        return {
          ...newState,calling: 1
        };
      case "HANG_UP":
        return {
          ...newState,calling: 0,from: undefined
        };
      case "INCOMING":
        const newFrom = !incoming ? action.from : undefined
        return {
          ...newState,incoming: !incoming,from: newFrom
        }
      case "NEXT":
        let nextIndex;
        if(index === contacts.length - 1){
          nextIndex = 0
        } else {
          nextIndex = index + 1;
        }
        return {
          ...newState,index: nextIndex
        };
      case "PREVIOUS":
        let prevIndex;
        if(index === 0){
          prevIndex = contacts.length - 1
        } else {
          prevIndex = index - 1;
        }
        return {
          ...newState,calling: undefined,index: prevIndex
        };
      case "SET_RATING":
        newState.contacts[action.index].rating = action.rating;
        return {
          newState,};
      default:
        throw new Error();
    }
}

const StateProvider = ({ children }) => {
  const [state,dispatch] = React.useReducer(reducer,initialState);
  return <Provider value={{ state,dispatch }}>{children}</Provider>;
};

export { store,StateProvider };

         /* App.js */
import React,{ useContext,useEffect } from "react";
import "./App.css";
import ContactCarousel from "./Components/ContactCarousel";
import axios from "axios";
import { store } from "./Store";
import { Device } from "twilio-client";
import MessageInput from "./Components/MessageInput";

export default function App() {
  const globalState = useContext(store);
  const {
    accept,calling,connection,contacts,index,from,} = globalState.state;

  const { dispatch } = globalState;

  console.log("INDEX",index);

  useEffect(() => {
    Device.ready(function () {
      console.log("CONNECTED TO TWILIO");
    });

    Device.incoming(function (conn) {
      dispatch({ type: "INCOMING",from: conn.parameters.From });
      console.log("Incoming connection from " + conn.parameters.From);
      // accept the incoming connection and start two-way audio
      dispatch({ type: "ADD_CONNECTION",connection: conn });

      conn.on("cancel",() => {
        dispatch({ type: "CANCEL_INCOMING" });
      });

      conn.on("reject",() => {
        dispatch({ type: "CANCEL_INCOMING" });
      });

      conn.on("disconnect",() => {
        dispatch({ type: "CANCEL_INCOMING" });
        dispatch({ type: "HANG_UP" });
      });
    });

    Device.on("disconnect",() => {
      dispatch({ type: "HANG_UP" });
      dispatch({ type: "NEXT" });

      if (index !== contacts.length) {
        makeCall(contacts[index].phoneNumber);
      }
    });
  },[]);

  const makeCall = async (phoneNum) => {
    await Device.disconnectAll();
    dispatch({ type: "MAKE_CALL" });
    Device.connect({ number: phoneNum });
  };

  const hangUp = async () => {
    await Device.disconnectAll();
  };

  function CallButtons() {
    if (calling) {
      return (
        <div className="col-md-6 d-flex justify-content-center">
          <button
            className="mb-1 btn linkButton bg-danger ml-1"
            onClick={() => {
              dispatch({ type: "CANCEL_INCOMING" });
              dispatch({ type: "HANG_UP" });
            }}
            style={{
              overflow: "hidden",width: "100px",height: "100px",fontSize: "10px",float: "right",}}
          >
            Hang Up
          </button>
        </div>
      );
    } else {
      return (
        <>
          {" "}
          <div className="col-md-3 justify-content-left">
            <button
              className="mb-1 btn linkButton bg-success mr-1"
              style={{ marginRight: "15px" }}
              onClick={() => {
                connection.accept();
                dispatch({ type: "MAKE_CALL" });
              }}
              style={{
                overflow: "hidden",}}
            >
              Accept
            </button>
          </div>
          <div className="col-md-3 d-flex flex-row-reverse justify-content-right">
            <button
              className="mb-1 btn linkButton bg-danger ml-1"
              onClick={() => {
                dispatch({ type: "CANCEL_INCOMING" });
                connection.reject();
              }}
              style={{
                overflow: "hidden",}}
            >
              Decline
            </button>
          </div>
        </>
      );
    }
  }

  const IncomingCall = () => {
    return (
      <div className="card bg-warning">
        <div className="card-header text-info bg-light text-center">
          <h1>{`Call coming in from ${from}`}</h1>
        </div>
        <div className="row d-flex flex-row p-5">
          <div className="col-md-3"></div>
          {CallButtons()}
          <div className="col-md-3"></div>
        </div>
      </div>
    );
  };

  const pageContent = () => {
    if (incoming) {
      return <IncomingCall />;
    }
    return <ContactCarousel makeCall={makeCall} hangUp={hangUp} />;
  };

  const flex = incoming ? "d-flex align-content-center" : null;

  return (
    <>
      <div className={`container bg-dark ${flex}`} style={{ height: "500px" }}>
        {pageContent()}
      </div>
      <div className="row d-flex justify-content-center">
        <MessageInput />
      </div>
    </>
  );
}