React上下文：组件未呈现

Question

在我的React17.0.1 SPA翻译应用程序中，我有一个包含两个部分的页面。顶部用于输入，底部用于该输入的翻译。我在为该页面使用单个上下文/状态时遇到过问题，因为翻译是由远程API执行的，当它返回时，如果不更新输入部分并将其重置为调用翻译API时所保持的值，我就无法更新UI。

因此，我将页面分成两个上下文，一个用于输入，一个用于翻译。到目前为止还好。翻译的渲染是我第一次做的。但是，尽管翻译上下文中的状态在需要时会通过它的简化程序改变（我的日志记录证明了这一点），页面的适当部分不会随着这些改变而重新呈现。正如我所说的，这很奇怪，因为我第一次以这种方式改变状态时，它实际上是重新呈现的。

这张草图更详细地展示了基本结构，但我漏掉了很多：

app.js

import { React, useRef, createContext, useReducer } from "react";
import ReactDOM from 'react-dom';
import { Form } from "react-bootstrap";
import { Translation } from "./Translation";

const NativeContext = createContext();
const TranslationsContext = createContext();

const nativeReducer = (state, action) {...}
const translationsReducer = (state, action) {...}

const App = () {
  const inputControl = useRef(null);
  const [nativeState, nativeDispatch] = useReducer(nativeReducer, {});
  const [translationsState, translationsDispatch] = useReducer(translationsReducer, {});
  const handleChange = async () => {
    // fetch from external API
    translationsDispatch({ type: "TX", payload: { text: text, translations: data.translations } });
  }

  return (
    <NativeContext.Provider value={{ nativeState, nativeDispatch }}>
      <Form.Control key="fc-in" autoFocus ref={inputControl} as="textarea" id="inputControl" defaultValue={nativeState.text} onChange={textChanged} />
    </NativeContext.Provider>
    <TranslationsContext.Provider value={{ translationsState, translationsDispatch }}>
      {translationsState.translations.map((item, index) => {
        return <Translation index={index} item={item} to={item.language} key={`tx-${item.language}`} />;
      })}
    </TranslationsContext.Provider>
  );
}

我用通常的index.js来启动它：

index.js

  ReactDOM.render(<React.StrictMode><App /></React.StrictMode>,document.getElementById('root'));

const nativeReducer = (state, action) => {
  switch (action.type) {
    case "TEXT":
      return {
        ...state,
        text: action.payload.text
      };
  }
};

const initialTranslationsState = {
  to: ["de"],
  translations: [
    {
      language: "de",
      text: "Ich hab keine lust Deutsche zu sprechen"
    }
  ]
};

import { React, useContext } from "react";

export const Translation = props => {
  const { translationsState, translationsDispatch } = useContext(TranslationsContext);
  
  return (
    <Form.Control as="textarea" defaultValue={translationsState.translations[props.index].text} readOnly />
  );
}

传入的道具包含与该组件的特定实例应该引用哪个翻译有关的数据。我不想在道具中传递翻译本身，所以在道具中只传递索引。翻译本身在上下文中传递。

当我进入页面时，NativeContext（指本地语言btw）中已经有一些文本，我有一个useEffect子句调用translate来启动整个过程。这导致翻译被更新，一两秒钟后，我看到屏幕组件呈现结果，而不更新输入文本（事实证明这非常重要）。

但是，当我去编辑输入文本时，翻译结果不会呈现。正如我提到的，我有日志记录来检查状态，它已经适当地改变了，但是在页面上呈现它们的子组件没有被呈现，所以我只能在控制台中看到输出。无论我多久更新一次输入文本，都会发生这种情况。

我有点被这个卡住了。我在stackoverflow上讨论过类似的问题，但它们主要与试图改变状态的人有关，我没有这样做，或者与基于类的旧方法有关，无论如何，这种方法在设计上有缺陷。让我知道如果你需要更多的信息来帮助解决这个问题。

Answer 1

“...这导致翻译被更新，一两秒钟后，我看到屏幕组件呈现结果，而不更新输入文本”

一旦您获取了翻译，您就将该值单独发送到translationContext。这意味着，所有使用它的组件都将重新呈现。

您的输入组件假定您引用了包装在NativeProvider中的组件，但它不使用translationProvider，因此不会监听任何相关的更改。