Question

单击按钮时，我只需要显示最高值。但是在这里，只有当我们单击按钮两次，而不是一次。
我们可以使用filter方法之类的ES6功能来做到这一点吗？在这里，我通过使用for循环来做到这一点：

const [dataObject, setdataObject] = useState([{}]);
const [filterData, setfilterData] = useState({});

const showMillions = () => {
  // //console.log(dataObject);
  let x = 0;
  let name = '';
  for (let i = 0; i < dataObject.length; i++) {
    // console.log(dataObject);
    if (dataObject[i].money > x) {
      x = dataObject[i].money;
      name = dataObject[i].name;
    }
  }
  setfilterData(name);
  for (let i = 0; i < dataObject.length; i++) {
    if (filterData === dataObject[i].name) {
      setdataObject([dataObject[i]]);
    }
  }
};
<div><button className="btn btn-dark" onClick={showMillions} >Show Millionaires</button></div>

Answer 1

您必须两次单击按钮，因为setfilterData(name)是异步的。您可以在最后一个for循环中使用useEffect或使用name代替filterData。

const [dataObject, setdataObject] = useState([{}]);
const [filterData, setfilterData] = useState({});

useEffect(() => {
    // using filter
    setDataObject(dataObject.filter((item) => item.name === filterData));
}, [filterData]);

const showMillions = () => {
    // //console.log(dataObject);
    let x = 0;
    let name = '';

    for (let i = 0; i < dataObject.length; i++) {
        // console.log(dataObject);
        if (dataObject[i].money > x) {
             x = dataObject[i].money;
             name = dataObject[i].name;
        }
    }
    setfilterData(name);
  }
};
<div><button className="btn btn-dark" onClick={showMillions} >Show Millionaires</button></div>

仅当我们单击按钮两次而不是通过使用Recat Hooks一次时，状态才会更新

1 个答案: