Javascript 为什么不是'；组件是否提供了正确的信息？反应
我正在渲染一个值数组，我有两个按钮，一个是添加，另一个是删除。一切都按它应该的方式工作，但当我单击“删除”时，正确索引中的元素将从数组中删除，但当它再次渲染时，它将删除最后一个条目，而不是该特定索引中的条目 例如：（左侧为网页，右侧为控制台） 当前数组是Javascript 为什么不是'；组件是否提供了正确的信息？反应,javascript,reactjs,Javascript,Reactjs,我正在渲染一个值数组，我有两个按钮，一个是添加，另一个是删除。一切都按它应该的方式工作，但当我单击“删除”时，正确索引中的元素将从数组中删除，但当它再次渲染时，它将删除最后一个条目，而不是该特定索引中的条目 例如：（左侧为网页，右侧为控制台） 当前数组是[“hello”，“world”，“everyone”]，假设我想删除“world”，我单击它旁边的删除按钮，数组会正确更新（我做了一个console.log），它会变成[“hello”，“everyone”]，它会重新渲染，但会显示它，就好像
[“hello”，“world”，“everyone”]“world”删除按钮，数组会正确更新（我做了一个console.log），它会变成[“hello”，“everyone”]
，它会重新渲染，但会显示它，就好像数组是[“hello”，“世界”]
并错误地呈现：
我不确定我对代码做了什么错误的处理，因为数组得到了正确的更新，其他一切似乎都正常
childChange: function(name, valid, value) {
this.state.values = this.props.values;
var pattern = /[0-9]+/; // Using regex to find last digits from 0-9
var match = name.match(pattern); // Update state
var i = parseInt(match); // Parse char into int
// console.log(match);
this.state.values[i] = value;
this.setState(this.state);
this.props.callback( // Call parent callback
this.props.name,
this.props.node.valid(this.state.values),
this.state.values
);
},
addEmptyItem: function() {
this.state.values = this.props.values;
this.state.values.push("");
this.setState(this.state);
},
removeItem: function(ev) {
console.log(ev.currentTarget.dataset.index);
var i = parseInt(ev.currentTarget.dataset.index);
this.state.values = this.props.values;
this.state.values.splice(i,1);
console.log(this.state.values);
this.setState(this.state.values);
},
render: function() {
var that = this;
console.log("===RENDER===");
return (
<div id = "form">
{this.props.values.map(function(v, i) {
return (
<div>
{(that.props.node.get().constructor.name === "Parent") ?
<ParentComponent
name={that.props.name + i}
key={i}
timer={that.props.timer}
callback={that.childChange}
values={v}
newParent={that.props.node.get()}
/>
:
<div>
<NodeComponent
name={that.props.name + i}
key={i}
timer={that.props.timer}
callback={that.childChange}
value={v}
newNode={that.props.node.get()}
/>
</div>
}
<button data-index={i} onClick={that.removeItem}>Remove
</button>
</div>
)
})}
<button onClick={() => that.addEmptyItem()}>Add
</button>
</div>
)
}
childChange:函数（名称、有效值、值）{
this.state.values=this.props.values；
var pattern=/[0-9]+/；//使用正则表达式查找0-9中的最后一位数字
var match=name.match（模式）；//更新状态
var i=parseInt（匹配）；//将字符解析为int
//控制台日志（匹配）；
this.state.values[i]=值；
this.setState（this.state）；
this.props.callback（//调用父回调
这个.props.name，
this.props.node.valid（this.state.values），
这是我的价值观
);
},
addEmptyItem:function（）{
this.state.values=this.props.values；
this.state.values.push（“”）；
this.setState（this.state）；
},
removeItem:功能（ev）{
log（ev.currentTarget.dataset.index）；
var i=parseInt（ev.currentTarget.dataset.index）；
this.state.values=this.props.values；
该状态值拼接（i，1）；
console.log（this.state.values）；
this.setState（this.state.values）；
},
render:function（）{
var=这个；
console.log（“==RENDER==”）；
返回(
{this.props.values.map（函数（v，i）{
返回(
{（that.props.node.get（）.constructor.name==“Parent”）？
:
}
去除
)
})}
that.addEmptyItem（）}>Add
)
}
将函数更改为如下所示：
removeItem: function(ev) {
console.log(ev.currentTarget.dataset.index);
var i = parseInt(ev.currentTarget.dataset.index);
let values = [...this.props.values];
values.splice(i,1);
console.log(this.state.values);
this.setState(values);
}
为什么？当您使用react state时，从不直接更改它。您可以在中查看它。
您在这里所做的是更改状态，然后调用“setState”，这不起作用。您应该创建新变量，操纵新变量，然后使用新变量调用setState将函数更改为如下所示：
removeItem: function(ev) {
console.log(ev.currentTarget.dataset.index);
var i = parseInt(ev.currentTarget.dataset.index);
let values = [...this.props.values];
values.splice(i,1);
console.log(this.state.values);
this.setState(values);
}
为什么？当您使用react state时，从不直接更改它。您可以在中查看它。
您在这里所做的是，您更改了状态，然后调用了“setState”，这不起作用。您应该创建新变量，对新变量进行操作，然后使用新变量调用setState即使在创建新变量并对其进行操作并调用setState之后，我也无法使其正确渲染。它没有更新removeItem中新的值
数组，但没有正确渲染我可以看到您在渲染函数中渲染props.values，而不是state.values，如果您刚刚更新，这可能是您的问题吗？我不相信？我一直在使用props.values
渲染它，即使使用添加，它也没有任何问题EmptyItem
。我不确定还有什么问题。我建议您重新组织代码，同时更改状态和道具太麻烦了。请尝试以下方式之一重写组件：1.呈现state.values而不是prop.values。2.继续呈现state.props，但不要保留state.props但删除会发生在父组件中。即使在创建新变量并对其进行操作并调用setState之后，我也无法使其正确渲染。它在removeItem中更新了新的值
数组，但没有正确渲染。我可以看到您在渲染函数中而不是在状态中渲染props.values.values，如果您刚刚更新，可能是您的问题吗？我不相信。我一直在使用道具渲染它。values
并且它没有任何问题，即使使用addEmptyItem
。我不确定还有什么问题。我建议您重新组织代码，更改状态和属性太麻烦了同时使用props。尝试用以下方法之一重写组件：1.渲染state.values而不是prop.values。2.继续渲染state.props，但不保留state，但删除将发生在父组件中。