时间戳

首页 > 解决方案 > setState后如何使用reducer函数

javascript - setState后如何使用reducer函数

问题描述

嗨我想做 setState 然后运行函数。我收到此错误：警告：来自 useState() 和 useReducer() 挂钩的状态更新不支持第二个回调参数。要在渲染后执行副作用，请在组件主体中使用 useEffect() 声明它。安慰。

我的代码：

import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { addPostOptions } from '../../actions/post';

const NewPostOptions = ({ addPostOptions, category: { selected } }) => {
    const [optionData, setOptionData] = useState({
        transaction_type: ''
    });



    const {
        transaction_type
    } = optionData;


    const onChange = e => {
        setOptionData({ ...optionData, [e.target.name]: e.target.value }, () => addPostOptions(optionData));
    }

    return selected.id === 1001 ? (
        <div class="form-group">
            <p>Hello</p>
        </div>
    ) :
        selected.id === 102 ? (
            <div class="form-group">
                <input
                    type="text"
                    placeholder="Title"
                    name="transaction_type"
                    value={transaction_type}
                    onChange={e => onChange(e)}
                />
                <small class="form-text">You should set a title</small>
            </div>
        ) :
            (
                <div></div>
            )
}

NewPostOptions.propTypes = {
    addPostOptions: PropTypes.func.isRequired
}

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

export default connect(mapStateToProps, { addPostOptions })(NewPostOptions)```

标签： javascriptreactjsredux

解决方案

正如错误所说。删除 setOptionDate 函数中的第二个参数。并使用 useEffect。每次更改 optionData 状态后，效果都会运行。

useEffect(() => {
   addPostsOptions(optionData);
}, [optionData, addPostsOptions]);

推荐阅读