Reactjs 反应中的积垢，使用useState更新项目不工作

我正在尝试使用

React Hooks

创建CRUD，但在

updateItem函数上遇到了一些问题。
使用
useState
的第一个输入非常有效（我可以在输入中键入），但当我单击“重命名项”时，会出现第二个输入，但我无法在其中键入，也不会从控制台记录任何错误

这是我的密码：

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

function App() {

//List with one item
const [list, setList] = useState([{ id: Math.random() + 1, name: 'Test' }]);

//Inputs
const [input, setInput] = useState('');
const [newInput, setNewInput] = useState('');

const [edit, setEdit] = useState();

function createItem(value) {
    if (!value.trim()) return;

    let obj = { id: Math.random() + 1, name: value }
    setList([...list, obj])
}

function deleteItem(id) {
    setList(list.filter(item => item.id !== id));
}

function updateItem(id) {
    setEdit(
        <div>
            //I can't type anything in here 
            <input type="text" value={newInput} onChange={e => setNewInput(e.target.value)} />
            <button onClick={() => {
                let array = [...list];

                array.map((item, i) => {
                    if (item.id === id) array[i] = { id, newInput }
                })

                setList([...array])
                setEdit('') //Remove the edit from the DOM

            }}>Rename</button>
        </div>
    )
}

return (
    <div>
        <input type="text" value={input} onChange={e => setInput(e.target.value)} />
        <button onClick={() => createItem(input)}>Add Item</button>

        {list.map(item => (
            <div key={item.id}>
                <p>{item.name}</p>
                <button onClick={() => updateItem(item.id)}>Rename Item</button>
                <button onClick={() => deleteItem(item.id)}>Delete Item</button>
            </div>
        ))}

        {edit}
    </div>
);
}

ReactDOM.render(<App />, document.getElementById('root'));

从“react dom”导入ReactDOM；
从“React”导入React，{useState}；
函数App（）{
//列出一个项目
const[list，setList]=useState（[{id:Math.random（）+1，name:'Test'}]）；
//投入
const[input，setInput]=useState（“”）；
const[newInput，setNewInput]=useState（“”）；
const[edit，setEdit]=useState（）；
函数createItem（值）{
如果（！value.trim（））返回；
设obj={id:Math.random（）+1，name:value}
集合列表（[…列表，对象]）
}
函数deleteItem（id）{
setList（list.filter（item=>item.id！==id））；
}
函数updateItem（id）{
设置编辑(
//我不能在这里打字
setNewInput（e.target.value）}/>
{
让数组=[…列表]；
array.map（（项目，i）=>{
if（item.id==id）数组[i]={id，newInput}
})
集合列表（[…数组]）
setEdit（“”）//从DOM中删除编辑
}}>改名
)
}
返回(
setInput（e.target.value）}/>
createItem（输入）}>添加项
{list.map（项=>(
{item.name}

updateItem（item.id）}>重命名项
deleteItem（item.id）}>删除项
))}
{编辑}
);
}
ReactDOM.render（，document.getElementById（'root'））；
尝试使用setEdit通过布尔值显示/隐藏。您将能够键入输入

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

function App() {
  //List with one item
  const [list, setList] = useState([{ id: Math.random() + 1, name: "Test" }]);

  //Inputs
  const [input, setInput] = useState("");
  const [newInput, setNewInput] = useState("");

  const [edit, setEdit] = useState(false);

  function createItem(value) {
    if (!value.trim()) return;

    let obj = { id: Math.random() + 1, name: value };
    setList([...list, obj]);
  }

  function deleteItem(id) {
    setList(list.filter(item => item.id !== id));
  }

  function updateItem() {
    setEdit(true);
  }

  return (
    <div>
      <input
        type="text"
        value={input}
        onChange={e => setInput(e.target.value)}
      />
      <button onClick={() => createItem(input)}>Add Item</button>

      {list.map(item => (
        <div key={item.id}>
          <p>{item.name}</p>
          <button onClick={() => updateItem(item.id)}>Rename Item</button>
          <button onClick={() => deleteItem(item.id)}>Delete Item</button>
          {edit && (
            <div>
              //I can't type anything in here
              <input
                type="text"
                value={newInput}
                onChange={e => {
                  setNewInput(e.target.value);
                }}
              />
              <button
                onClick={() => {
                  let array = [...list];

                  array.map((o, i) => {
                    if (o.id === item.id) array[i] = { id: item.id, newInput };
                  });

                  setList([...array]);
                  setEdit(false); //Remove the edit from the DOM
                }}
              >
                Rename
              </button>
            </div>
          )}
        </div>
      ))}
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

从“react-dom”导入ReactDOM；
从“React”导入React，{useState}；
函数App（）{
//列出一个项目
const[list，setList]=useState（[{id:Math.random（）+1，name:“Test”}]）；
//投入
const[input，setInput]=useState（“”）；
const[newInput，setNewInput]=useState（“”）；
const[edit，setEdit]=useState（false）；
函数createItem（值）{
如果（！value.trim（））返回；
设obj={id:Math.random（）+1，name:value}；
setList（[…list，obj]）；
}
函数deleteItem（id）{
setList（list.filter（item=>item.id！==id））；
}
函数updateItem（）{
setEdit（真）；
}
返回(
setInput（e.target.value）}
/>
createItem（输入）}>添加项
{list.map（项=>(
{item.name}

updateItem（item.id）}>重命名项
deleteItem（item.id）}>删除项
{编辑&&(
//我不能在这里打字
{
setNewInput（如目标值）；
}}
/>
{
让数组=[…列表]；
array.map（（o，i）=>{
if（o.id==item.id）数组[i]={id:item.id，newInput}；
});
集合列表（[…数组]）；
setEdit（false）；//从DOM中删除编辑
}}
>
改名
)}
))}
);
}
render（，document.getElementById（“根”））；
尝试使用setEdit通过布尔值显示/隐藏。您将能够键入输入

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

function App() {
  //List with one item
  const [list, setList] = useState([{ id: Math.random() + 1, name: "Test" }]);

  //Inputs
  const [input, setInput] = useState("");
  const [newInput, setNewInput] = useState("");

  const [edit, setEdit] = useState(false);

  function createItem(value) {
    if (!value.trim()) return;

    let obj = { id: Math.random() + 1, name: value };
    setList([...list, obj]);
  }

  function deleteItem(id) {
    setList(list.filter(item => item.id !== id));
  }

  function updateItem() {
    setEdit(true);
  }

  return (
    <div>
      <input
        type="text"
        value={input}
        onChange={e => setInput(e.target.value)}
      />
      <button onClick={() => createItem(input)}>Add Item</button>

      {list.map(item => (
        <div key={item.id}>
          <p>{item.name}</p>
          <button onClick={() => updateItem(item.id)}>Rename Item</button>
          <button onClick={() => deleteItem(item.id)}>Delete Item</button>
          {edit && (
            <div>
              //I can't type anything in here
              <input
                type="text"
                value={newInput}
                onChange={e => {
                  setNewInput(e.target.value);
                }}
              />
              <button
                onClick={() => {
                  let array = [...list];

                  array.map((o, i) => {
                    if (o.id === item.id) array[i] = { id: item.id, newInput };
                  });

                  setList([...array]);
                  setEdit(false); //Remove the edit from the DOM
                }}
              >
                Rename
              </button>
            </div>
          )}
        </div>
      ))}
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

从“react-dom”导入ReactDOM；
从“React”导入React，{useState}；
函数App（）{
//列出一个项目
const[list，setList]=useState（[{id:Math.random（）+1，name:“Test”}]）；
//投入
const[input，setInput]=useState（“”）；
const[newInput，setNewInput]=useState（“”）；
const[edit，setEdit]=useState（false）；
函数createItem（值）{
如果（！value.trim（））返回；
设obj={id:Math.random（）+1，name:value}；
setList（[…list，obj]）；
}
函数deleteItem（id）{
setList（list.filter（item=>item.id！==id））；
}
函数updateItem（）{
setEdit（真）；
}
返回(
setInput（e.target.value）}
/>
createItem（输入）}>添加项
{list.map（项=>(
{item.name}

updateItem（item.id）}>重命名项
deleteItem（item.id）}>删除项
{编辑&&(
//我不能在这里打字
{
setNewInput（如目标值）；
}}
/>
{
让数组=[…列表]；
array.map（（o，i）=>{
if（o.id==item.id）数组[i]={id:item.id，newInput}；
});
集合列表（[…数组]）；
setEdit（false）；//从DOM中删除编辑
}}
>
改名
)}
))}
);
}
render（，document.getElementById（“根”））；
问题在于如何运行
updateItem（）
函数。

您正在使用以下调用
updateItem（item.id）}>Rename item


在
updateItem（）
中，您执行
setEdit
，它会在屏幕上添加一个输入框和按钮。

但是现在，您在更新输入框时遇到了问题。这是因为只有再次运行
updateItem（）
函数时，才会更新输入框。

因此，为了更新输入框，您必须再次运行
setEdit

以下是如何将其放入主组件中的解决方案，以便输入框随每次渲染而更新

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

function App() {
  //List with one item
  const [list, setList] = useState([{ id: Math.random() + 1, name: "Test" }]);

  //Inputs
  const [input2, setInput2] = useState("");
  const [newInput, setNewInput] = useState("");

  const [edit, setEdit] = useState(null);

  function createItem(value) {
    if (!value.trim()) return;

    let obj = { id: Math.random() + 1, name: value };
    setList([...list, obj]);
  }

  function deleteItem(id) {
    setList(list.filter((item) => item.id !== id));
  }

  function renameItem() {
    // Rename item
    alert("Rename item " + edit + " to " + newInput);
    setEdit(null);
    setNewInput(null);
  }

  return (
    <div>
      <input
        type="text"
        value={input2}
        onChange={(e) => setInput2(e.target.value)}
      />
      <button onClick={() => createItem(input2)}>Add Item</button>

      {list.map((item) => (
        <div key={item.id}>
          <p>{item.name}</p>
          <button onClick={() => setEdit(item.id)}>
            Rename Item {item.id}
          </button>
          <button onClick={() => deleteItem(item.id)}>Delete Item</button>
        </div>
      ))}

      {edit && (
        <div>
          <input
            type="text"
            value={newInput}
            onChange={(e) => setNewInput(e.target.value)}
          />
          <button onClick={() => renameItem()}>Rename</button>
        </div>
      )}
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

从“react-dom”导入ReactDOM；
从“React”导入React，{useState}；
函数App（）{
//列出一个项目
const[list，setList]=useState（[{id:Math.random（）+1，name:“Test”}]）；
//在