搜索reactjs后更新数组的状态

Question

我有一个国家、州、任务三个下拉列表，其中一些值从数组和搜索按钮中填充，该按钮基于下拉选择工作。我第一次从任务下拉菜单中选择一个值 =“verify”时，网格（值的数组）在 handlesubmit 事件中被过滤，但是当我从任务下拉菜单中重新选择另一个值 =“add”时，网格只从上一个过滤列表，不返回任何记录

我认为我无法在该搜索按钮的每次提交（handlesubmit 是我在单击按钮时调用的事件）时重置数组。下面是我需要重置搜索任务以启动任务的代码：

class Initiate extends Component {
    constructor(props) {
        super(props);
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
        var data = [{
            id: 1,
            country: "USA",
            task: "Verify ",
            state: "Alaska"
        },
{
            id: 2,
            country: "USA",
            task: "Add ",
            state: "Delaware"
        },
{
            id: 3,
            country: "USA",
            task: "Verify ",
            state: "Delaware"
        }];

         this.state = {
             searchtasks: data,
             initialstate :data,
            country: Country [0],
            task: Task [0],
            state: States[0]
        };
    }


    handleChange(event) {
         this.setState({ value: event.target.value });
    }

    handleSubmit(event) {
        event.preventDefault();
    this.setstate({searchtasks: this state.initialstate});
        const sa = Country[event.target.ddlcountry.value].label;
        const tt = Task [event.target.ddltask.value].label;
        const st = States[event.target.ddlstates.value].label;
        if (sa !== "Select Country")
        {
            this.setState({ searchtasks: this.state.searchtasks.filter(item => item.country === sa) });
        }
        if (tt !== "Select Task") {
            this.setState({ searchtasks: this.state.searchtasks.filter(item => item.task === tt) });
        }
        if (st !== "Select State") {
            this.setState({ searchtasks: this.state.searchtasks.filter(item => item.state === st) });
        }
        }

    //formats the cost
    priceFormatter(cell, row) {
        return '<i class="glyphicon glyphicon-usd"></i> ' + cell;

    }


    // renders the component
    render() {
        const selectRowProp = {
            mode: "checkbox",
            clickToSelect: true
        };

Answer 1

在这部分代码中：

// ...
var data = [/* ... */];

this.state = {
  searchtasks: data,
  initialstate :data,
  // ...
};

您将相同的data 数组分配给状态值searchtasks 和initialstate。可能是个问题。

为什么会这样？因为在 Javascript 中，对象是通过Object reference 传递的。

看例子。

const exampleArray = [1, 2, 3]
const exampleObject = { value1: exampleArray, value2: exampleArray }

exampleObject.value1 // => [1, 2, 3]
exampleObject.value2 // => [1, 2, 3]

exampleObject.value1[0] = 5

exampleObject.value1 // => [5, 2, 3]
exampleObject.value2 // => [5, 2, 3]

所以在你的情况下你可以使用destructuring assignment:

constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    const data = [{
        id: 1,
        country: "USA",
        task: "Verify ",
        state: "Alaska"
    }, {
        id: 2,
        country: "USA",
        task: "Add ",
        state: "Delaware"
    }, {
        id: 3,
        country: "USA",
        task: "Verify ",
        state: "Delaware"
    }];

    this.state = {
        searchtasks: { ...data },
        initialstate: { ...data },
        country: Country[0],
        task: Task[0],
        state: States[0]
    };
}

您应该对所有对象分配使用相同的方法。

在您的 handleSubmit() 中有一行：

this.setstate({searchtasks: this state.initialstate});

应该是：

this.setstate({ searchtasks: { ...this.state.initialstate } });

顺便说一句，你不必使用var，因为你已经在使用现代 JS 语法了。