已更新

Question

在将新的鼓添加到setDrums中的鼓阵列中时，每个鼓组件都会显示出来，用户可以给该鼓起一个名称，如何将name添加到鼓中。数组drums？

我可以注销鼓ID，但是如何在阵列中找到该鼓并仅用用户输入的名称更新该鼓？

https://codesandbox.io/s/amazing-dan-dsudq?file=/src/index.js:0-1371

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";

const rootElement = document.getElementById("root");

const Drum = ({ id, count, remove, editName, name }) => {
  const [sounds, setSounds] = useState(count);

  useEffect(() => {
    if (sounds > 0)
      setTimeout(() => {
        console.log("Playing sound");
        setSounds(sounds - 1);
      }, 1000);
  }, [sounds]);

  return (
    <div>
      <p>Drum #{id}</p>
      <p>Drum Name {name}</p>
      <p>Remaining sounds: {sounds}</p>
      <label>
        Drum Name <input type="text" onChange={editName} />
      </label>
      <br />
      <button onClick={remove}>Delete drum #{id}</button>
    </div>
  );
};

const App = () => {
  const [drums, setDrums] = useState([]);
  const [nextId, setNextId] = useState(0);

  return (
    <div>
      {drums.map(drum => (
        <Drum
          key={drum.id}
          id={drum.id}
          count={drum.count}
          remove={() => setDrums(drums.filter(other => drum.id !== other.id))}
          editName={() => console.log(drum.id)} // <== how to save the entered name to setDrums?
          name={drum.name}
        />
      ))}
      <button
        onClick={() => {
          setDrums([
            ...drums,
            { id: nextId, count: Math.floor(Math.random() * 100) }
          ]);
          setNextId(nextId + 1);
        }}
      >
        Add drum
      </button>
    </div>
  );
};

ReactDOM.render(<App />, rootElement);

Answer 1

已更新

我也更新了codenadbox。Link

理论-要更新此值，我们需要数组的标识符，即每个鼓的索引。

我创建了一个editDrumName函数，该函数接受两个参数，一个是事件，另一个是id。然后，我将鼓克隆到一个tempDrums变量中，并用id更新了该值。

您不能对子组件执行此操作，因为该值会在props中传递。

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";

const rootElement = document.getElementById("root");

const Drum = ({ id, count, remove, editName, name, index }) => {
  const [sounds, setSounds] = useState(count);

  useEffect(() => {
    if (sounds > 0)
      setTimeout(() => {
        console.log("Playing sound");
        setSounds(sounds - 1);
      }, 1000);
  }, [sounds]);

  return (
    <div>
      <p>Drum #{id}</p>
      <p>Drum Name: {name}</p>
      <p>Remaining sounds: {sounds}</p>
      <label>
        Drum Name <input type="text" onChange={e => editName(e, index)} />
      </label>
      <br />
      <button onClick={remove}>Delete drum #{id}</button>
    </div>
  );
};

const App = () => {
  const [drums, setDrums] = useState([]);
  const [nextId, setNextId] = useState(0);

  const editDrumName = (event, id) => {
    let tempDrums = drums;
    tempDrums[id].name = event.target.value;
    setDrums([...tempDrums]);
  };

  return (
    <div>
      {drums.map((drum, index) => (
        <Drum
          key={drum.id}
          id={drum.id}
          index-{index}
          count={drum.count}
          remove={() => setDrums(drums.filter(other => drum.id !== other.id))}
          editName={editDrumName} // <== how to save the entered name to setDrums?
          name={drum.name}
        />
      ))}
      <button
        onClick={() => {
          setDrums([
            ...drums,
            { id: nextId, count: Math.floor(Math.random() * 100) }
          ]);
          setNextId(nextId + 1);
        }}
      >
        Add drum
      </button>
    </div>
  );
};

ReactDOM.render(<App />, rootElement);

Answer 2

如何将数组更改为对象，然后像这样调用setDrums：

editName={(e) => setDrums({...drums, drums[drum.id].name: e.target.value )}

Answer 3

由于不能将React状态视为不可变的，因此无法直接编辑原始数组，因此每次更改时都应重新引用该数组。

editName={event => {
  // set the new value to drum
  drum.name = event.target.value;
  // update drums state by creating shallow copy of the old one
  setDrums(drums.slice(0));
}}

ref：http://facebook.github.io/react/docs/component-api.html

Answer 4

正确的方法是通过阵列映射，找到感光鼓并对其进行更新。

我们不应该直接改变状态。对于对象，当我们复制它并更新复制对象的属性时，原始对象会发生变异。

working demo is here

...
const editName = (e, id) => {
    setDrums(
      drums.map(item => {
        if (item.id === id) {
          return { ...item, name: e.target.value };
        }
        return item;
      })
    );
  };
...
    {drums.map(drum => (
        <Drum
          key={drum.id}
          id={drum.id}
          count={drum.count}
          remove={() => setDrums(drums.filter(other => drum.id !== other.id))}
          editName={e => editName(e, drum.id)} // <== how to save the entered name to setDrums?
          name={drum.name}
        />
      ))}
   {drums.map(drum => (
        <Drum
          key={drum.id}
          id={drum.id}
          count={drum.count}
          remove={() => setDrums(drums.filter(other => drum.id !== other.id))}
          editName={e => editName(e, drum.id)} // <== how to save the entered name to setDrums?
          name={drum.name}
        />
      ))}
...

反应：如何从子组件更新数组中的对象

4 个答案:

已更新