在控制臺中出現警告并且我的顯示串列功能/組件不起作用-有解無憂

我正在制作一個簡單的待辦事項串列，但洗掉按鈕及其操作存在一些錯誤，如果我不添加任何有關洗掉串列的功能，一切正常......

這是我的代碼：

待辦事項.js

import React, { useState } from 'react'
import AddNew from './Addnew';
import ToDoList from './ToDoList';

function Todo() {

    const[toDoList, setToDoList] = useState([]);

    function addNew(addText, date){
        // console.log(addText);
        // console.log(date);
        const obj = {
            text : addText,
            expiry : date,
            completed : false
        }
        const newToDo = [...toDoList, obj];
        setToDoList(newToDo); 
        // console.log(toDoList);
    }

    function handleCheck(index){
        const newToDOs = [...toDoList];
        if(toDoList[index].completed==false){
            newToDOs[index].completed = true;
        }
        else {
            newToDOs[index].completed = false;
        }
        setToDoList(newToDOs);
    }

    function RemoveList(index){
        console.log(index);
        const newTo = [...toDoList];
        newTo.splice(index,1);
        setToDoList(newTo);
    }

    return ( 
        <>
            <h1>To Do List</h1>
            <AddNew addNew={addNew}/>
            <ul className="list-group">
            <ToDoList list={toDoList} handleCheck={handleCheck} RemoveList={RemoveList} />
            </ul>
        </>
     );
}

export default Todo;

ToDoList.js

import React from "react";

function ToDoList(props) {
  return (
    <>
      {/* {props.list.length == 0 ? <h3>To Do List is Empty</h3> : null} */}
      {props.list.map((element, index) => {
        return (
          <>
            <li
              className={
                element.completed
                  ? "list-group-item yes-comp"
                  : "list-group-item no-comp"
              }
            >
              <span className="badge text-bg-info">{index   1}</span> &ensp;
              <input
                type="checkbox"
                defaultChecked={element.completed}
                onChange={() => {
                  props.handleCheck(index);
                }}
              />{" "}
              &ensp;
              {element.text}
              <span className="badge text-bg-light">
                {element.expiry.toString().slice(4, 15)}
              </span>
              <button className="btn btn-danger" onChange={props.RemoveList(index)} >Remove</button>
            </li>
          </>
        );
      })}
    </>
  );
}

export default ToDoList;

AddNew.js

import React, { useState } from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

function AddNew(props) {
  const [startDate, setStartDate] = useState(new Date());
  const [input, setInput] = useState("");

  function submitData() {
    props.addNew(input, startDate);
    setInput("");
  }

  return (
    <>
      <div className="Container InputContain">
        <input className="form-control" placeholder="Add New in To Do List" value={input} onInput={(e) => setInput(e.target.value)} />
        <div>
        <DatePicker
            className="AddDate"
          selected={startDate}
          onChange={(date) => setStartDate(date)}
        />
        <button className="btn btn-primary btn-cust" onClick={submitData}>Add</button>
      </div>
      </div>
    </>
  );
}

export default AddNew;

警告是：

react-dom.development.js:86 Warning: Cannot update a component (`Todo`) while rendering a different component (`ToDoList`). To locate the bad setState() call inside `ToDoList`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render
    at ToDoList (http://localhost:3000/static/js/bundle.js:262:21)
    at ul
    at Todo (http://localhost:3000/static/js/bundle.js:374:82)
    at App

react-jsx-dev-runtime.development.js:87 Warning: Each child in a list should have a unique "key" prop.

Check the render method of `ToDoList`. See https://reactjs.org/link/warning-keys for more information.
    at ToDoList (http://localhost:3000/static/js/bundle.js:262:21)
    at ul
    at Todo (http://localhost:3000/static/js/bundle.js:374:82)
    at App

我試圖更改我的函式名稱，更改如何從串列中洗掉的方法以及我可以在谷歌上找到的所有內容，但無法正常作業！

uj5u.com熱心網友回復：

如果不運行代碼，我相信您的問題是這行代碼：

<button className="btn btn-danger" onChange={props.RemoveList(index)} >Remove</button>

事件處理程式應始終傳遞一個回呼函式，以便在事件發生時存盤在記憶體中。此外，此事件處理程式應該是一個onClick. 您的onClick屬性應如下所示：

onClick={() => props.RemoveList(index)}

作為旁注，將函式呼叫傳遞給事件處理程式僅在被呼叫的函式回傳函式本身并且沒有副作用時才有效：

const getCallback = () => {
  const callback = () => setState('foo');

  return callback;
}

<button onClick={GetCallback()}> set state </button>

希望這可以幫助。

uj5u.com熱心網友回復：

您需要從onClick()而不是觸發洗掉功能onChange()。另一件事是，當您傳遞對的參考時onClick，例如onClick={props.RemoveList(index)}，onClick 事件會removeList()以 HTMLEvent 作為引數呼叫該函式。

要修復您的代碼，只需將洗掉按鈕更改為：

<button className="btn btn-danger" onChange={props.RemoveList(index)} >Remove</button>

至

<button className="btn btn-danger" onClick={() => props.RemoveList(index)}>Remove</button>.

請注意，使用索引作為從串列中洗掉內容的鍵是一個壞主意。考慮為每個待辦事項生成唯一 ID，并使用它來識別正確的待辦事項。

uj5u.com熱心網友回復：

您直接呼叫該方法，而不是傳遞對它的參考。也沒有onChange所以button

onChange={props.RemoveList(index)}

應該改為

onClick={() => props.RemoveList(index)}

同樣關于第二次警告，在您的li標簽中添加一個關鍵屬性

        <li
          className={
            element.completed
              ? "list-group-item yes-comp"
              : "list-group-item no-comp"
          }
          key={element.text}
        >

索引不是用作key值的最佳實踐，所以我在text這里添加了屬性，但你應該使用更“獨特”的東西，它也應該在你的RemoveList函式中使用。

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/524575.html

標籤：javascript反应数组

上一篇：如何為ag網格中的每一行自定義懸停顏色反應

下一篇：React.js-函式作為React子級無效