反应:在useEffect中设置输入状态不起作用

Question

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

这是我的代码：

编辑问题.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);

问题.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对象来使用效果钩子依赖 数组(正如 ESlint 告诉我的那样(，输入被填充，但GET_QUESTION是 在无限的循环中调度。正如我在 Chrome 中的 ReduxDevToolsExtension 选项卡

有什么想法可以解决这个问题吗？

Answer 1

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

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