反应：在useEffect中设置输入状态不起作用答案

【问题标题】：React: Setting input state inside useEffect not working反应：在useEffect中设置输入状态不起作用
【发布时间】：2020-01-24 07:58:11
【问题描述】：

我正在使用 React 和 Redux 开发应用程序。我正在尝试使用 API 数据预填充我的输入。为此，我在 useEffect 中获取我的 API 数据。而且我也在里面设置我的状态。问题是输入没有填充 API 数据。它是空的，但是当我重新加载页面时，它会被填充并且工作正常。

这是我的代码：

EditQuestion.js

const EditQuestion = ({ getQuestionById, question: { question, loading }, match: { params } }) => {
  const [formData, setFormData] = useState({ title: "" });

  useEffect(() => {
    // Get data from API
    getQuestionById(params.id);

    // Populate `title` input with API Data
    setFormData({
      title: question !== null && question.title ? question.title : ""
    });

  }, [getQuestionById, params.id]); // If `question` object is passed to this dependency array, `GET_QUESTION` is dispatched in an infinite endless loop 

  const onChange = e =>
    setFormData({ ...formData, [e.target.name]: e.target.value });

  const onSubmit = e => {};

  const { title } = formData;

  return (
    <form onSubmit={e => onSubmit(e)}>
        <input 
            type="text" 
            name="title" 
            placeholder="e.g How to encrypt a string in C" 
            value={title} 
            onChange={e => onChange(e)}
        />
        <input type="submit" value="Ask question" />
    </form>
  );
};

EditQuestion.propTypes = {
  getQuestionById: PropTypes.func.isRequired,
  question: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
  question: state.question
});

export default connect(
  mapStateToProps,
  { getQuestionById }
)(EditQuestion);

question.js（动作）

// Get question by ID
export const getQuestionById = id => async dispatch => {
  try {
    const res = await axios.get(`/api/question/${id}`);

    dispatch({
      type: GET_QUESTION,
      payload: res.data
    });
  } catch (err) {
    dispatch({
      type: QUESTION_ERROR,
      payload: { msg: err.response.statusText, status: err.response.status }
    });
  }
};

注意：如果我将 question 对象传递给 useEffect 挂钩依赖项数组（正如 ESlint 告诉我的那样），输入被填充，但 GET_QUESTION 是在无限循环中调度。正如我在 ReduxDevToolsExtension chrome 中的标签

有解决这个问题的办法吗？

【问题讨论】：

标签： reactjs react-hooks use-effect

【解决方案1】：

您需要为来自 BE 的传入响应添加额外的 useEffect 钩子：

useEffect(() => {
    // Populate `title` input with API Data
    setFormData({
      title: question !== null && question.title ? question.title : ""
    });

  }, [question]);

【讨论】：