使用Redux时输入值不变

rfbsl7qr 于 2023-04-21 发布在其他

关注(0)|答案(2)|浏览(135)

我正在尝试构建一个简单的React应用程序，它使用Redux进行状态管理。我能够创建一个存储和调度操作，但无法弄清楚为什么输入的显示值没有更新。
这里是sandbox
我有一个单独的 * reducer.js * 和 * App.js *。都在下面。

// This is App.js file
import "./styles.css";
import { createStore } from "redux";
import myReducer from "./reducers/reducer.js";

const store = createStore(myReducer);

store.subscribe(() => {
  console.log("current state", store.getState());
});

export default function App() {
  function updateFName(event) {
    let action = { type: "UPDATE_FIRST_NAME", payload: event.target.value };
    store.dispatch(action);
  }

  function updateLName(event) {
    let action = { type: "UPDATE_LAST_NAME", payload: event.target.value };
    store.dispatch(action);
  }

  return (
    <div className="App">
      <h1>
        Hello {store.getState().fName} {store.getState().lName}
      </h1>
      <input
        value={store.getState().fName}
        onChange={updateFName}
        placeholder={"Fisrt Name"}
      />
      <input
        value={store.getState().lName}
        onChange={updateLName}
        placeholder={"Last Name"}
      />
    </div>
  );
}

// This is reducer.js file
const initialState = {
  fName: "",
  lName: ""
};

function myReducer(state = initialState, action) {
  switch (action.type) {
    case "UPDATE_FIRST_NAME":
      return { ...state, fName: state.fName + action.payload };
    case "UPDATE_LAST_NAME":
      return { ...state, lName: state.lName + action.payload };
    default:
      return state;
  }
}

export default myReducer;

当我在输入字段中键入内容时（图中的红色圆圈），我确实会在控制台中登录更新的存储状态（图中的绿色圆圈）。**但显示的值不会更改。**如何更改

我试着阅读其他答案，但还是想不出来。请帮帮忙。

redux

来源：https://stackoverflow.com/questions/75997118/input-value-not-changing-when-using-redux

2条答案

按热度按时间

bnl4lu3b1#

问题是你当前的组件没有被重新渲染。当组件的“状态”或“属性”改变时，你的组件会被重新渲染。
在redux应用程序中，我们通常用

import { Provider } from "react-redux";

root.render(
  <StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </StrictMode>
);

然后使用useSelecter钩子，我们访问状态，如果检测到任何更改，useSelector将重新渲染应用程序，以便我们的组件从商店获取最新数据。由于您只想查看redux的基本功能，我将向您展示如何使您的组件重新渲染，以便您看到问题。在App.js中

import { useState } from "react";

const [firstName, setFirstName] = useState();

在onChange处理程序中，您正在更新redux存储，但在本例中，我们还将更新本地状态

<input
    value={store.getState().fName}
    onChange={(e) => {
      updateFName(e), 
      setFirstName(e.target.value);
    }}
    placeholder={"Fisrt Name"}
  />

由于setFirstName将更新useState值，因此组件将重新呈现，您将看到存储中更新的值。

赞(0）回复(0）举报 2023-04-21

izkcnapc2#

我认为这里的一般最佳实践是对输入value s使用本地状态，然后使用按钮中的onClick处理程序将更新提交到redux状态存储。这样，您可以在数据添加到状态存储之前进行任何需要的验证。大致如下：

import {useState} from 'react';

const Form = () => {
  const [fName, setFName] = useState('');

  const validateForm = () => {
    let validForm = true;

    // Do some checks here using fName and set to false if invalid data
    if (fName === '') {
      validForm = false;
    }

    return validForm;
  }

  const submitForm = (event) => {
    // Prevents the submit button from refreshing the page
    event.preventDefault();

    // Validate for required fields; Returns true if input data is valid
    const validForm = validateForm();

    if (validForm) {
      // Copied from your code above
      let action = { type: "UPDATE_FIRST_NAME", payload: fName };
      store.dispatch(action);
    }
  }

  return (
    <input
      value={fName}
      onChange={(event) => setFName(event.target.value)}
    />
    <button onClick={event => submitForm(event)}>Submit</button>
  );
}

赞(0）回复(0）举报 2023-04-21

我来回答

使用Redux时输入值不变

2条答案

相关问题

热门标签

最新问答