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 } });

顺便说一句，由于您已经在使用现代JS语法，因此您不必使用var。

搜索reactjs之后更新数组的状态

1 个答案: