首先尝试将您的操作映射到道具。

Question

我有一个这样的表格：

export type SuperSignupScreenProps = {name: string[]};
export const updateForm = (field: string, value: string) => (dispatch: Dispatch<{}>) => {
    var arr = [value];
    dispatch(setName(arr));
};
export const setName = createAction('SET_NAME', (name: string[]) => name);

export const setNameReducer = handleAction(setName, (state, action) => action.payload, [] as string[]);

export const superSignupReducer = combineReducers({
    setNameFunc: setNameReducer
});

动作减速器看起来像这样：

<p>

运行时，此代码不会在<?php // load footer address outside of repeater $exists = false; //initialize the field to false; $default = get_field('footer_address', 'option'); if( have_rows('footer_details', 'option') ): while( have_rows('footer_details', 'option') ): the_row(); // moved the_row to it's own line for clarity $post_object = get_sub_field('company', 'option'); if ( is_page($post_object) ) { // load the address custom field into a variable named $address $exists = true; //set the value to true; $address = get_sub_field('address', 'option'); // check if the $address variable is empty if ( ! $address ) { // if it is empty, load the default into the $address variable $address = $default; } ?> <div class="company-footer"> <?php echo $address; // output the $address variable, which contains either the address or the default address echo get_sub_field('contact','option'); ?> </div> <?php } endwhile; endif; // evalute if it existed if($exists==false){ ?> <div class="company-footer"> <?php echo 'use the default footer'; ?> </div> <?php } ?>标记中显示输入的名称。

我在这里缺少什么？还有什么更好的方法来检查道具是否正确更新？

Answer 1

您似乎正在错误地触发操作。

为了让Redux知道您正在调用的操作会影响商店，需要像您的状态一样连接到组件。

首先尝试将您的操作映射到道具。

这些方面的东西应该可以解决问题（请参阅评论以获取更多细节）：

// Change this to reference the file that exports your updateForm action
import { updateForm } from '/actions/form';

class SuperSignupScreenImpl extends React.PureComponent<SuperSignupScreenProps & {dispatch: Dispatch<{}>}, {}> {
  render() {
    return(
      <div>
        <TextField
          hintText = "Name"
          onChange = {this.handleInputChange.bind(this)}
          name = "name"
        >

        </TextField>
        <p>{this.props.name}</p>
      </div>
    );
  }
  handleInputChange(event){
    const target = event.target;
    const value = target.value;
    const name = target.name;
    console.log(value);
    // use your action like this (now that it's mapped to this component's props)
    this.props.updateForm(name, value);
  }
}
function mapStateToProps(state: {name: string[]}): SuperSignupScreenProps {
  return {name: state.name};
}
// map the updateForm action we imported above
function mapDispatchToProps(dispatch: any) {
  return {updateForm};
}

// and connect it here
const SuperSignupScreen = connect(mapStateToProps, mapDispatchToProps)(SuperSignupScreenImpl);

export default SuperSignupScreen;

如果您需要其他参考，请查看我在TypeScript React / Redux样板中连接它的方式。我会从这里开始努力：

https://github.com/jonnyasmar/gravity-bp/blob/master/src/utils/redux.ts

redux根据表单输入更改prop

1 个答案:

首先尝试将您的操作映射到道具。