ReactJS如何更新数组中对象的状态

问题描述

你好，我有一个我不知道要解决的问题。

我有一个简单的公式，用户输入som输入。之后，当他单击按钮时，配方师下方将显示名字，姓氏和图片。当我单击输入时，它将显示地址和日期。

但是我这样做有问题。在App.js中，我有一个初始为空数组的状态，单击“提交”按钮后，用户输入将添加到该空数组中。在Suggestions.js中，我映射了Sugestations数组以显示来自用户的每个建议。

在UserInputs.js中，我有一个状态，我在状态中将“可见”添加为false，我想这样做，当我单击列表中的建议时，它将在此特殊建议下方显示说明和日期。 / p>

我想这样做。在App.js中

const detail = (suggestion) => {
        
        setSuggestions([...suggestions]); //but I don't kNow how to set state for particular 
                                            suggestion in the array.
      };

我的代码：

App.js

import React,{ useState } from "react";
import Suggestions from "./components/Suggestions";
import UserInputs from "./components/UserInputs";

function App() {
  const [suggestions,setSuggestions] = useState([]);

  const addNewSuggestion = (suggestion) => {
    setSuggestions([suggestion,...suggestions]);
  };

  const detail = (suggestion) => {
    
    setSuggestions([...suggestions]);
  };

  console.log("suggestions",suggestions);

  return (
    <div className="app-container">
      <UserInputs addNewSuggestion={addNewSuggestion}></UserInputs>
      <Suggestions suggestions={suggestions} detail={detail}></Suggestions>
    </div>
  );
}

export default App;

Suggestions.js

import React from "react";

export default function Suggestions({ suggestions,detail }) {
  return (
    <div className="suggestion-container">
      <h1 className="suggestion-heading">Zoznam Podnetov</h1>
      {suggestions.map((suggestion,index) => {
        return (
          <div
            key={suggestion.id}
            className="suggestion"
            onClick={() => detail(suggestion)}
          >
            <div className="suggestion-number">{index + 1}</div>

            <div className="suggestion-details">
              <div className="suggestion-name">
                {suggestion.firstName}
                {` ${suggestion.lastName}`}
              </div>

              <div className="suggestion-address">{suggestion.address}</div>
              {suggestion.visible ? (
                <div className="suggestion-description">
                  <p>{suggestion.description}</p>
                  <p>Podnet bol pridaný: {suggestion.date}</p>
                </div>
              ) : null}
            </div>

            <div className="suggestion-picture">
              <img
                src={suggestion.picture}
                alt="obrázok"
                className="suggestion-picture"
              ></img>
            </div>
          </div>
        );
      })}
    </div>
  );
}

Userinputs.js

import React,{ useState } from "react";

export default function UserInputs({ addNewSuggestion }) {
  const randomId = Math.floor(Math.random() * 1000000);

  const [userInputs,setUserInputs] = useState({
    id: randomId,firstName: "",lastName: "",address: "",description: "",picture: null,date: new Date().toLocaleDateString(),visible: true,});

  const onInputChange = (event) => {
    setUserInputs({
      ...userInputs,[event.target.name]: event.target.value,});
  };

  const fileSelectHandler = (event) => {
    setUserInputs({
      ...userInputs,picture: URL.createObjectURL(event.target.files[0]),});
  };

  const onSubmit = (event) => {
    event.preventDefault();

    addNewSuggestion(userInputs);

    setUserInputs({
      id: randomId,});
  };

  return (
    <div>
      <form className="form-container">
        <div className="row">
          <label>Meno</label>
          <input
            autoFocus
            type="text"
            name="firstName"
            value={userInputs.firstName}
            onChange={onInputChange}
          ></input>
        </div>

        <div className="row">
          <label>Priezvisko</label>
          <input
            type="text"
            name="lastName"
            value={userInputs.lastName}
            onChange={onInputChange}
          ></input>
        </div>

        <div className="row">
          <label>Adresa</label>
          <input
            type="text"
            name="address"
            value={userInputs.address}
            onChange={onInputChange}
          ></input>
        </div>

        <div className="row">
          <label>Popis</label>
          <input
            type="text"
            name="description"
            value={userInputs.description}
            onChange={onInputChange}
          ></input>
        </div>

        <div className="row">
          <input type="file" onChange={fileSelectHandler}></input>
        </div>

        <button onClick={onSubmit} className="button">
          odoslať
        </button>
      </form>
    </div>
  );
}

非常感谢您的帮助。

解决方法

您可以更新建议，其中ID与输入建议匹配，并且仅对其进行更新。请在下面找到代码：

this.questions.forEach(this.get_choices)