Javascript 手变重

我对与Redux相关的handleChange输入有一个问题，它几乎可以工作，但不完全可以，因为当我改变状态时，在一个字段中有状态的改变。猜猜我想实现什么，但是当我在另一个字段中改变时，这个状态从第一个字段消失，并保存在第二个字段中（在下面的图片上，我展示了我的意思）。我有两个中等说服力的想法，那就是，在减速机中"value:action.payload.num|u building | |“”，并在“do”的位置，因此始终存在一些内容，然后当我执行post时，我执行修剪，以便没有空间，post将作为空值飞行，或者代替“”在同一位置执行state。num_building.value在一个字段中，state.test.value在另一个字段中，但这里是问题是，如果我键入某个内容，然后删除整个输入，则始终会有我们键入的文本的第一个字母，我不知道如何删除它：(

Slicer.js

import { createSlice } from '@reduxjs/toolkit';

export const numberBuildingSlice = createSlice({
  name: 'number_building',
  initialState: {
    num_building: { key: 'num_building', value: '' },
    test: { key: 'test', value: '' },
  },
  reducers: {
    inputChange: (state, action) => {
      return {
        ...state,
        num_building: {
          ...state.num_building,
          value: action.payload.num_building || state.num_building.value,
        },
        test: {
          ...state.test,
          value: action.payload.test || ' ',
        },
      };
    },
  },
});

export const { inputChange } = numberBuildingSlice.actions;

export const numberBuildingState = (state) => state.number_building;

export default numberBuildingSlice.reducer;

组件

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import axios from 'axios';
import {
  numberBuildingState,
  inputChange,
} from '../redux/slices/numberBuildingSlice';
import LabelInput from '../reusable-components/LabelInput';

const URL = 'http://localhost:8000/numbers-buildings/';

function AddNumberBuilding() {
  const numberBuilding = useSelector(numberBuildingState);
  const dispatch = useDispatch();
  const { value } = numberBuilding.num_building;

  const handleChange = async (event) => {
    const response = await dispatch(
      inputChange({ [event.target.name]: event.target.value }),
    );
    console.log(response);
  };

  function postNumberBuilding() {
    const jsonData = { num_building: value };
    axios
      .post(URL, jsonData)
      .then((res) => {
        console.log(res);
      })
      .catch((error) => console.error(error.response));
  }

  return (
    <div>
      <input
        name="num_building"
        onChange={handleChange}
        {...numberBuilding.num_building}
      />
      <input name="test" onChange={handleChange} {...numberBuilding.test} />
      <input type="submit" onClick={postNumberBuilding} value="Add New!" />
    </div>
  );
}

export default AddNumberBuilding;

从“React”导入React；
从“react-redux”导入{useSelector，useDispatch}；
从“axios”导入axios；
进口{
编号BuildingState，
输入更改，
}来自“../redux/slices/numberBuildingSlice”；
从“../ReusableComponents/LabelInput”导入LabelInput；
常量URL=http://localhost:8000/numbers-建筑物;；
函数AddNumberBuilding（）{
常量numberBuilding=useSelector（numberBuildingState）；
const dispatch=usedpatch（）；
const{value}=numberBuilding.num_building；
const handleChange=async（事件）=>{
const response=等待调度(
inputChange（{[event.target.name]：event.target.value}），
);
控制台日志（响应）；
};
函数postNumberBuilding（）{
const jsonData={num_building:value}；
axios
.post（URL，jsonData）
。然后（（res）=>{
控制台日志（res）；
})
.catch（（error）=>console.error（error.response））；
}
返回(
);
}
导出默认AddNumberBuilding；

您正在更新reducer中的两个值，即使您只发送一个变量以在分派函数中更新

解决方案是使用动态密钥访问器

reducers: {
    inputChange: (state, action) => {
      const key = Object.keys(action.payload)[0];
      return {
        ...state,
        [key ]: {
          ...state[action.payload[key]],
          value: action.payload[key ] || state.num_building.value,
        },
      };
    },
  },

---

另一方面，您不需要使用扩展模式。Redux Toolkit使用它创建状态对象的代理。您只需执行以下操作：

state.num_building.value=action.payload.num_building | | state.num_building.value

非常感谢！在您的第一个版本中，当我在输入Redux sta中写入内容时，有些东西不起作用te没有得到更改，但第二个版本正在运行！再次感谢您！