反应数组状态更新

Question

我从数据库中得到一个书单并存储在一个状态变量中书单也有书价字段

const [books, setBooks]=useState([])
setBooks(data)

数组中的每个书籍对象都有 BookName、Author、Price、Discount 等属性

我已经渲染了一个如下的 html 表格

return ( <div>
{books.map((x,i) => ( <tr>
                         <td>x.bookName</td>
                         <td>x.price</td>
                         <td><MyCustomTextInput onChange={e => handleChange(e, x.id)}  value={x.discount}></MyCustomTextInput></td>
                      <tr></div>);

MyCustomTextInput 的示例代码如下

function MyCustomTextInput(props)
     { return (<div><TextInput></TextInput> </div>) 
     } exports default MyCustomTextInput

我更新“books”数组中相应对象价格的代码如下

function handleChange(x,id){
  var obj = books[id];
  obj.price = obj.price - e.target.value; //I am correctly getting discount in e.target.value
}

除了折扣后的价格没有反映在 UI 上之外，一切都正常工作。虽然它在数组中得到了正确更新，但没有反映在 UI 上。

任何帮助....

专家 -

Answer 1

你需要setBooks更新状态books。

function handleChange(x, id) {
  setBooks(
    books.map((item) =>
      item.id === id ? { ...item, price: item.price - parseFloat(e.target.value) } : item,
    ),
  );
}

Answer 2

这是在设置一个值：

function handleChange(x, id){
  var obj = books[id];
  obj.price = obj.price - e.target.value;
}

但这不是更新状态。这里要遵循的主要规则是永远不要直接改变状态。在这里改变这条规则的结果是这个更新永远不会告诉 React 重新渲染组件。由于状态从未更新，因此在其他任何地方触发的任何重新渲染都会破坏您在此处更新的值。

您需要调用setBooks 来更新状态。例如：

function handleChange(x, id){
  setBooks(books.map(b =>
    b.id === id ? { ...b, price: b.price - parseFloat(e.target.value) } : b
  ));
}

这里本质上发生的是，您将现有数组置于状态并使用.map() 将其投影到新数组。在该投影中，您查找具有匹配 id 的记录并创建该记录的新版本，所有其他记录都按原样投影。然后将这个新数组（.map() 的结果）设置为新的更新状态。

当然还有其他方法可以构造新数组。您可以获取数组元素并按照现有方式对其进行更新，然后将其与.filter 的结果的扩展相结合以构建新数组。任何对您有意义的结构都可以正常工作。重点是您需要构造一个 new 数组并将其设置为新的状态值。

这将触发 React 重新渲染组件，并且新更新的状态将反映在渲染中。

Answer 3

为此，您需要在 handleChange 方法中更改价格后调用 setBooks 以重新渲染具有新更新状态的组件。

就像下面这样：

function handleChange(x,id){
  var obj = books[id];
  obj.price = obj.price - e.target.value; //I am correctly getting discount in e.target.value
  setBooks([...books]);
}