React：在 TextField 中设置值

Question

再次返回另一个反应问题！

UserInfoStep.js（儿童）

    function UserInfoStep({ PUID, FirstName, handleChangeParent }) {
    const { dispatch } = useContext(ContactFormContext);

    return (
        //some controls

        <FormControl>
            <Grid container spacing={3}>

                <Grid item xs={12}>
                    <TextField required label="PUID"
                        style={{ width: '100%' }}
                        name="PUID"
                        onChange={e =>
                            dispatch({ type: "PUID", payload: e.target.value })
                        }
                        value={PUID} variant="outlined" />
                </Grid>
            </Grid>

            <Grid item xs={12} md={6}>
                <TextField
                    required
                    style={{ width: '100%' }}
                    label="First Name"
                    name="FirstName"
                    onChange={e =>
                        dispatch({ type: "FIRST_NAME_CHANGE", payload: e.target.value })
                    }
                    value={FirstName}

                    variant="outlined"
                />
            </Grid>
        </FormControl>
    );
}

export default UserInfoStep;

ContactForm.js（父级）

    const initialState = {
    PUID: "",
    FirstName: "",
    total: 0
    //other params removed
};

function formReducer(state, action) {
    switch (action.type) {
        case "PUID":
            fetch('https://api.npms.io/v2/search?q=react')
                .then(result => result.json())
                .then(data => {

                    console.log(data.total);
                });
            return { ...state, PUID: action.payload };
        case "FIRST_NAME_CHANGE":
            return { ...state, FirstName: action.payload };
        default:
            throw new Error();
    }
}

function ContactForm() {
    const { PUID, FirstName, total } = state;


    const steps = [
        <UserInfoStep handleChangeParent={handleChange} {...{ PUID, FirstName }} />,
    ];

    return (
        <ContactFormContext.Provider value={{ dispatch }}>
    //some code removed

        </ContactFormContext.Provider>
    );
}

export default ContactForm;

我想在 PUID onChange 触发时在 FirstName 输入框中设置 API 调用 (data.total) 返回的值。如果需要，也可以将 API 调用移至子级 (UserInfoStep)。

编辑

我现在已将我的 API 调用移至 UserInfoStep.js

const onPUIDChanged = (event) => {    
fetch('https://api.npms.io/v2/search?q=react')
  .then(result => result.json())
  .then(data => {        
    console.log(data.total);
  });
dispatch({ type: "PUID", payload: event.target.value });            
};


<Grid item xs={12}>
      <TextField required label="PUID"
      style={{width:'100%'}}
      name="PUID"
      onChange={onPUIDChanged}
      value={PUID} variant="outlined"/>
    </Grid>

Answer 1

不要在你的 reducer 中使用 API 调用，reducer 只是一个获取 action 并返回 state 的函数。

在redux架构中使用action-reducer-store的哲学是分离逻辑。

有两种选择：

1. 使用像 redux-saga 这样的第三个库来控制异步 API 调用并利用生成器的强大功能处理副作用。

2. 在您的组件/页面中调用 API，然后分派针对成功/失败情况采取适当的措施。