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: "[email protected]",rating: 5.0,},{
      name: "Some Other Name",phoneNumber: "[phone]",emailAddress: "[email protected]",],};

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>
    </>
  );
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）